From e904c9411a5b79ff87689d27183aec182883e4b6 Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 16 Dec 2025 13:38:07 -0800 Subject: [PATCH 1/5] feat: Migrates the reverse geocoding doc sample. --- samples/geocoding-reverse/README.md | 41 +++++++++++++++ samples/geocoding-reverse/index.html | 35 +++++++++++++ samples/geocoding-reverse/index.ts | 68 +++++++++++++++++++++++++ samples/geocoding-reverse/package.json | 14 +++++ samples/geocoding-reverse/style.css | 55 ++++++++++++++++++++ samples/geocoding-reverse/tsconfig.json | 17 +++++++ 6 files changed, 230 insertions(+) create mode 100644 samples/geocoding-reverse/README.md create mode 100644 samples/geocoding-reverse/index.html create mode 100644 samples/geocoding-reverse/index.ts create mode 100644 samples/geocoding-reverse/package.json create mode 100644 samples/geocoding-reverse/style.css create mode 100644 samples/geocoding-reverse/tsconfig.json diff --git a/samples/geocoding-reverse/README.md b/samples/geocoding-reverse/README.md new file mode 100644 index 00000000..0322715e --- /dev/null +++ b/samples/geocoding-reverse/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## geocoding-reverse + +The geocoding-reverse sample demonstrates reverse geocoding coordinates to addresses. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/geocoding-reverse` +`npm start` + +### Build an individual example + +`cd samples/geocoding-reverse` +`npm run build` + +From 'samples': + +`npm run build --workspace=geocoding-reverse/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/geocoding-reverse` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/geocoding-reverse/index.html b/samples/geocoding-reverse/index.html new file mode 100644 index 00000000..0fab3b68 --- /dev/null +++ b/samples/geocoding-reverse/index.html @@ -0,0 +1,35 @@ + + + + + + Reverse Geocoding + + + + + +
+ + +
+
+ + + + + + diff --git a/samples/geocoding-reverse/index.ts b/samples/geocoding-reverse/index.ts new file mode 100644 index 00000000..268cc695 --- /dev/null +++ b/samples/geocoding-reverse/index.ts @@ -0,0 +1,68 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// @ts-nocheck TODO remove when fixed + +// [START maps_geocoding_reverse] +function initMap(): void { + const map = new google.maps.Map( + document.getElementById("map") as HTMLElement, + { + zoom: 8, + center: { lat: 40.731, lng: -73.997 }, + } + ); + const geocoder = new google.maps.Geocoder(); + const infowindow = new google.maps.InfoWindow(); + + (document.getElementById("submit") as HTMLElement).addEventListener( + "click", + () => { + geocodeLatLng(geocoder, map, infowindow); + } + ); +} + +function geocodeLatLng( + geocoder: google.maps.Geocoder, + map: google.maps.Map, + infowindow: google.maps.InfoWindow +) { + const input = (document.getElementById("latlng") as HTMLInputElement).value; + const latlngStr = input.split(",", 2); + const latlng = { + lat: parseFloat(latlngStr[0]), + lng: parseFloat(latlngStr[1]), + }; + + geocoder + .geocode({ location: latlng }) + .then((response) => { + if (response.results[0]) { + map.setZoom(11); + + const marker = new google.maps.Marker({ + position: latlng, + map: map, + }); + + infowindow.setContent(response.results[0].formatted_address); + infowindow.open(map, marker); + } else { + window.alert("No results found"); + } + }) + .catch((e) => window.alert("Geocoder failed due to: " + e)); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_geocoding_reverse] +export {}; diff --git a/samples/geocoding-reverse/package.json b/samples/geocoding-reverse/package.json new file mode 100644 index 00000000..f8a1c325 --- /dev/null +++ b/samples/geocoding-reverse/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/geocoding-reverse", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh geocoding-reverse && bash ../app.sh geocoding-reverse && bash ../docs.sh geocoding-reverse && npm run build:vite --workspace=. && bash ../dist.sh geocoding-reverse", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/geocoding-reverse/style.css b/samples/geocoding-reverse/style.css new file mode 100644 index 00000000..0c430148 --- /dev/null +++ b/samples/geocoding-reverse/style.css @@ -0,0 +1,55 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_geocoding_reverse] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#floating-panel { + position: absolute; + top: 10px; + left: 25%; + z-index: 5; + background-color: #fff; + padding: 5px; + border: 1px solid #999; + text-align: center; + font-family: "Roboto", "sans-serif"; + line-height: 30px; + padding-left: 10px; +} + +#floating-panel { + position: absolute; + top: 5px; + left: 50%; + margin-left: -180px; + width: 350px; + z-index: 5; + background-color: #fff; + padding: 5px; + border: 1px solid #999; +} + +#latlng { + width: 225px; +} + +/* [END maps_geocoding_reverse] */ \ No newline at end of file diff --git a/samples/geocoding-reverse/tsconfig.json b/samples/geocoding-reverse/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/geocoding-reverse/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} From 76e000e93136d832115ab8d3b2d4d4378737261c Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 16 Dec 2025 13:39:57 -0800 Subject: [PATCH 2/5] feat: Migrates reverse-geocoding sample, updates and improvements. --- samples/geocoding-reverse/index.html | 55 ++++++----- samples/geocoding-reverse/index.ts | 134 ++++++++++++++++----------- samples/geocoding-reverse/style.css | 73 +++++++-------- 3 files changed, 140 insertions(+), 122 deletions(-) diff --git a/samples/geocoding-reverse/index.html b/samples/geocoding-reverse/index.html index 0fab3b68..36a88fe7 100644 --- a/samples/geocoding-reverse/index.html +++ b/samples/geocoding-reverse/index.html @@ -1,35 +1,34 @@ - + - - Reverse Geocoding + + Reverse Geocoding - - - - -
- - -
-
- - - - + + + + + + + +
+

+ Click the map to reverse geocode, or paste in your own + coordinates. +

+
+ +
+ + diff --git a/samples/geocoding-reverse/index.ts b/samples/geocoding-reverse/index.ts index 268cc695..b865eb28 100644 --- a/samples/geocoding-reverse/index.ts +++ b/samples/geocoding-reverse/index.ts @@ -1,68 +1,96 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ +// [START maps_geocoding_reverse] +//let innerMap; +let marker; -// @ts-nocheck TODO remove when fixed +async function initMap() { + // Request the needed libraries. + const [{ Map, InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] = + await Promise.all([ + google.maps.importLibrary( + 'maps' + ) as Promise, + google.maps.importLibrary( + 'geocoding' + ) as Promise, + google.maps.importLibrary( + 'marker' + ) as Promise, + ]); -// [START maps_geocoding_reverse] -function initMap(): void { - const map = new google.maps.Map( - document.getElementById("map") as HTMLElement, - { - zoom: 8, - center: { lat: 40.731, lng: -73.997 }, - } - ); - const geocoder = new google.maps.Geocoder(); - const infowindow = new google.maps.InfoWindow(); + // Get the gmp-map element. + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; - (document.getElementById("submit") as HTMLElement).addEventListener( - "click", - () => { - geocodeLatLng(geocoder, map, infowindow); - } - ); -} + // Get the inner map. + let innerMap = mapElement.innerMap; -function geocodeLatLng( - geocoder: google.maps.Geocoder, - map: google.maps.Map, - infowindow: google.maps.InfoWindow -) { - const input = (document.getElementById("latlng") as HTMLInputElement).value; - const latlngStr = input.split(",", 2); - const latlng = { - lat: parseFloat(latlngStr[0]), - lng: parseFloat(latlngStr[1]), - }; + // Get the latlng input box. + const latLngQuery = document.getElementById('latlng') as HTMLInputElement; + + // Get the submit button. + const submitButton = document.getElementById('submit') as HTMLElement; + + // Set the cursor to crosshair. + innerMap.setOptions({ + draggableCursor: 'crosshair', + zoom: 13, + }); - geocoder - .geocode({ location: latlng }) - .then((response) => { - if (response.results[0]) { - map.setZoom(11); + // Create a marker for re-use. + marker = new AdvancedMarkerElement({ + map: innerMap, + }); - const marker = new google.maps.Marker({ - position: latlng, - map: map, - }); + const geocoder = new Geocoder(); + const infowindow = new InfoWindow(); - infowindow.setContent(response.results[0].formatted_address); - infowindow.open(map, marker); - } else { - window.alert("No results found"); - } - }) - .catch((e) => window.alert("Geocoder failed due to: " + e)); + // Add a click event listener to the submit button. + submitButton.addEventListener('click', () => { + geocodeLatLng(geocoder, innerMap, infowindow); + }); + + // Add a click event listener to the map. + innerMap.addListener('click', (event) => { + latLngQuery.value = `${event.latLng.lat()}, ${event.latLng.lng()}`; + geocodeLatLng(geocoder, innerMap, infowindow); + }); + + // Make an initial request upon loading. + geocodeLatLng(geocoder, innerMap, infowindow); } -declare global { - interface Window { - initMap: () => void; - } +async function geocodeLatLng( + geocoder: google.maps.Geocoder, + map: google.maps.Map, + infowindow: google.maps.InfoWindow +) { + const input = (document.getElementById('latlng') as HTMLInputElement).value; + const latlngStr = input.split(',', 2); + const latlng = { + lat: parseFloat(latlngStr[0]), + lng: parseFloat(latlngStr[1]), + }; + + geocoder + .geocode({ location: latlng }) + .then((response) => { + if (response.results[0]) { + marker.position = latlng; + map.setCenter(latlng); + infowindow.setContent(response.results[0].formatted_address); + infowindow.open(map, marker); + } else { + window.alert('No results found'); + } + }) + .catch((e) => window.alert('Geocoder failed due to: ' + e)); } -window.initMap = initMap; + +initMap(); // [END maps_geocoding_reverse] -export {}; diff --git a/samples/geocoding-reverse/style.css b/samples/geocoding-reverse/style.css index 0c430148..a220db5e 100644 --- a/samples/geocoding-reverse/style.css +++ b/samples/geocoding-reverse/style.css @@ -1,55 +1,46 @@ /** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ /* [START maps_geocoding_reverse] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; +/* +* Always set the map height explicitly to define the size of the div element +* that contains the map. +*/ +gmp-map { + height: 100%; } -/* - * Optional: Makes the sample page fill the window. - */ +/* +* Optional: Makes the sample page fill the window. +*/ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; + font-family: Roboto, sans-serif; } #floating-panel { - position: absolute; - top: 10px; - left: 25%; - z-index: 5; - background-color: #fff; - padding: 5px; - border: 1px solid #999; - text-align: center; - font-family: "Roboto", "sans-serif"; - line-height: 30px; - padding-left: 10px; -} - -#floating-panel { - position: absolute; - top: 5px; - left: 50%; - margin-left: -180px; - width: 350px; - z-index: 5; - background-color: #fff; - padding: 5px; - border: 1px solid #999; + background-color: #fff; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + margin: 10px; + padding: 15px; + font-family: Roboto, sans-serif; + font-size: 1rem; } #latlng { - width: 225px; + width: 100%; + font-family: Roboto, sans-serif; + font-size: 1rem; + margin-bottom: 4px; } -/* [END maps_geocoding_reverse] */ \ No newline at end of file +#submit { + font-size: 1rem; +} +/* [END maps_geocoding_reverse] */ From e03d6a89e136971ecd363038b7a1700d16524e76 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 7 Jan 2026 07:24:29 -0800 Subject: [PATCH 3/5] Update copyright year and variable declaration --- samples/geocoding-reverse/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/samples/geocoding-reverse/index.ts b/samples/geocoding-reverse/index.ts index b865eb28..fc724a6a 100644 --- a/samples/geocoding-reverse/index.ts +++ b/samples/geocoding-reverse/index.ts @@ -1,10 +1,9 @@ /** * @license - * Copyright 2025 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_geocoding_reverse] -//let innerMap; let marker; async function initMap() { @@ -28,7 +27,7 @@ async function initMap() { ) as google.maps.MapElement; // Get the inner map. - let innerMap = mapElement.innerMap; + const innerMap = mapElement.innerMap; // Get the latlng input box. const latLngQuery = document.getElementById('latlng') as HTMLInputElement; From 467bd6d98f2dde891ec471022cdeb1c5bbd201da Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 7 Jan 2026 07:24:49 -0800 Subject: [PATCH 4/5] Update copyright year in index.html --- samples/geocoding-reverse/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/geocoding-reverse/index.html b/samples/geocoding-reverse/index.html index 36a88fe7..285ca6f2 100644 --- a/samples/geocoding-reverse/index.html +++ b/samples/geocoding-reverse/index.html @@ -1,7 +1,7 @@ From 62b482a99e53d9f892494095c749b35cffcd048d Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 7 Jan 2026 07:25:06 -0800 Subject: [PATCH 5/5] Update copyright year in style.css --- samples/geocoding-reverse/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/geocoding-reverse/style.css b/samples/geocoding-reverse/style.css index a220db5e..55a85b12 100644 --- a/samples/geocoding-reverse/style.css +++ b/samples/geocoding-reverse/style.css @@ -1,6 +1,6 @@ /** * @license -* Copyright 2025 Google LLC. All Rights Reserved. +* Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_geocoding_reverse] */