From 5f053eb0e3816d4a6e3c6542b5d0f80660f99aae Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 7 Jan 2026 12:14:20 -0800 Subject: [PATCH 1/3] feat: Migrates the geocoding-simple sample. --- samples/geocoding-simple/README.md | 41 +++++++++ samples/geocoding-simple/index.html | 22 +++++ samples/geocoding-simple/index.ts | 113 +++++++++++++++++++++++++ samples/geocoding-simple/package.json | 14 +++ samples/geocoding-simple/style.css | 99 ++++++++++++++++++++++ samples/geocoding-simple/tsconfig.json | 17 ++++ 6 files changed, 306 insertions(+) create mode 100644 samples/geocoding-simple/README.md create mode 100644 samples/geocoding-simple/index.html create mode 100644 samples/geocoding-simple/index.ts create mode 100644 samples/geocoding-simple/package.json create mode 100644 samples/geocoding-simple/style.css create mode 100644 samples/geocoding-simple/tsconfig.json diff --git a/samples/geocoding-simple/README.md b/samples/geocoding-simple/README.md new file mode 100644 index 00000000..ca9af18c --- /dev/null +++ b/samples/geocoding-simple/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## geocoding-simple + +This sample shows how to perform simple geocoding. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/geocoding-simple` +`npm start` + +### Build an individual example + +`cd samples/geocoding-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=geocoding-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/geocoding-simple` +`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-simple/index.html b/samples/geocoding-simple/index.html new file mode 100644 index 00000000..956c0a36 --- /dev/null +++ b/samples/geocoding-simple/index.html @@ -0,0 +1,22 @@ + + + + + + Geocoding Service + + + + + + + +
+ + + diff --git a/samples/geocoding-simple/index.ts b/samples/geocoding-simple/index.ts new file mode 100644 index 00000000..7abab039 --- /dev/null +++ b/samples/geocoding-simple/index.ts @@ -0,0 +1,113 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// @ts-nocheck TODO remove when fixed + +// [START maps_geocoding_simple] +let map: google.maps.Map; +let marker: google.maps.Marker; +let geocoder: google.maps.Geocoder; +let responseDiv: HTMLDivElement; +let response: HTMLPreElement; + +function initMap(): void { + map = new google.maps.Map(document.getElementById("map") as HTMLElement, { + zoom: 8, + center: { lat: -34.397, lng: 150.644 }, + mapTypeControl: false, + }); + geocoder = new google.maps.Geocoder(); + + const inputText = document.createElement("input"); + + inputText.type = "text"; + inputText.placeholder = "Enter a location"; + + const submitButton = document.createElement("input"); + + submitButton.type = "button"; + submitButton.value = "Geocode"; + submitButton.classList.add("button", "button-primary"); + + const clearButton = document.createElement("input"); + + clearButton.type = "button"; + clearButton.value = "Clear"; + clearButton.classList.add("button", "button-secondary"); + + response = document.createElement("pre"); + response.id = "response"; + response.innerText = ""; + + responseDiv = document.createElement("div"); + responseDiv.id = "response-container"; + responseDiv.appendChild(response); + + const instructionsElement = document.createElement("p"); + + instructionsElement.id = "instructions"; + + instructionsElement.innerHTML = + "Instructions: Enter an address in the textbox to geocode or click on the map to reverse geocode."; + + map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText); + map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton); + map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton); + map.controls[google.maps.ControlPosition.LEFT_TOP].push(instructionsElement); + map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv); + + marker = new google.maps.Marker({ + map, + }); + + map.addListener("click", (e: google.maps.MapMouseEvent) => { + geocode({ location: e.latLng }); + }); + + submitButton.addEventListener("click", () => + geocode({ address: inputText.value }) + ); + + clearButton.addEventListener("click", () => { + clear(); + }); + + clear(); +} + +function clear() { + marker.setMap(null); + responseDiv.style.display = "none"; +} + +function geocode(request: google.maps.GeocoderRequest): void { + clear(); + + geocoder + .geocode(request) + .then((result) => { + const { results } = result; + + map.setCenter(results[0].geometry.location); + marker.setPosition(results[0].geometry.location); + marker.setMap(map); + responseDiv.style.display = "block"; + response.innerText = JSON.stringify(result, null, 2); + return results; + }) + .catch((e) => { + alert("Geocode was not successful for the following reason: " + e); + }); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_geocoding_simple] +export {}; diff --git a/samples/geocoding-simple/package.json b/samples/geocoding-simple/package.json new file mode 100644 index 00000000..59975ef6 --- /dev/null +++ b/samples/geocoding-simple/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/geocoding-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh geocoding-simple && bash ../app.sh geocoding-simple && bash ../docs.sh geocoding-simple && npm run build:vite --workspace=. && bash ../dist.sh geocoding-simple", + "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-simple/style.css b/samples/geocoding-simple/style.css new file mode 100644 index 00000000..5d7bb659 --- /dev/null +++ b/samples/geocoding-simple/style.css @@ -0,0 +1,99 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_geocoding_simple] */ +/* + * 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; +} + +input[type=text] { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + line-height: 40px; + margin-right: 0; + min-width: 25%; +} + +input[type=button] { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + height: 40px; + cursor: pointer; + margin-left: 5px; +} +input[type=button]:hover { + background: rgb(235, 235, 235); +} +input[type=button].button-primary { + background-color: #1a73e8; + color: white; +} +input[type=button].button-primary:hover { + background-color: #1765cc; +} +input[type=button].button-secondary { + background-color: white; + color: #1a73e8; +} +input[type=button].button-secondary:hover { + background-color: #d2e3fc; +} + +#response-container { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + overflow: auto; + max-height: 50%; + max-width: 90%; + background-color: rgba(255, 255, 255, 0.95); + font-size: small; +} + +#instructions { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + padding: 1rem; + font-size: medium; +} + +/* [END maps_geocoding_simple] */ \ No newline at end of file diff --git a/samples/geocoding-simple/tsconfig.json b/samples/geocoding-simple/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/geocoding-simple/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 f574fba1c0c4f858dee789fefb6e98e3ee753ae9 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 7 Jan 2026 12:45:19 -0800 Subject: [PATCH 2/3] feat: Updates for current standards; improvements. --- samples/geocoding-simple/index.html | 32 ++++-- samples/geocoding-simple/index.ts | 172 ++++++++++++++-------------- samples/geocoding-simple/style.css | 125 +++++++++----------- 3 files changed, 158 insertions(+), 171 deletions(-) diff --git a/samples/geocoding-simple/index.html b/samples/geocoding-simple/index.html index 956c0a36..3fa5d578 100644 --- a/samples/geocoding-simple/index.html +++ b/samples/geocoding-simple/index.html @@ -1,4 +1,4 @@ - + - - Geocoding Service + + Geocoding Service - - + + - - -
- + + + +
+ +
+ + +
+
+ 
+                
+
+ + diff --git a/samples/geocoding-simple/index.ts b/samples/geocoding-simple/index.ts index 7abab039..ece4436e 100644 --- a/samples/geocoding-simple/index.ts +++ b/samples/geocoding-simple/index.ts @@ -4,110 +4,104 @@ * SPDX-License-Identifier: Apache-2.0 */ -// @ts-nocheck TODO remove when fixed +/* +TODO: + * Figure out why there's spaces before the result JSON. +*/ + // [START maps_geocoding_simple] -let map: google.maps.Map; -let marker: google.maps.Marker; let geocoder: google.maps.Geocoder; -let responseDiv: HTMLDivElement; -let response: HTMLPreElement; - -function initMap(): void { - map = new google.maps.Map(document.getElementById("map") as HTMLElement, { - zoom: 8, - center: { lat: -34.397, lng: 150.644 }, - mapTypeControl: false, - }); - geocoder = new google.maps.Geocoder(); - - const inputText = document.createElement("input"); - - inputText.type = "text"; - inputText.placeholder = "Enter a location"; - - const submitButton = document.createElement("input"); - - submitButton.type = "button"; - submitButton.value = "Geocode"; - submitButton.classList.add("button", "button-primary"); - - const clearButton = document.createElement("input"); - - clearButton.type = "button"; - clearButton.value = "Clear"; - clearButton.classList.add("button", "button-secondary"); - - response = document.createElement("pre"); - response.id = "response"; - response.innerText = ""; - - responseDiv = document.createElement("div"); - responseDiv.id = "response-container"; - responseDiv.appendChild(response); - - const instructionsElement = document.createElement("p"); +let mapElement; +let innerMap; +let marker; +let responseDiv; +let response; + +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, + ]); + + // Get the gmp-map element. + mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + // Get the inner map. + innerMap = mapElement.innerMap; + + // Set the cursor to crosshair. + innerMap.setOptions({ + mapTypeControl: false, + fullscreenControl: false, + cameraControlOptions: { + position: google.maps.ControlPosition.INLINE_START_BLOCK_END, + }, + draggableCursor: 'crosshair', + }); - instructionsElement.id = "instructions"; + + geocoder = new google.maps.Geocoder(); - instructionsElement.innerHTML = - "Instructions: Enter an address in the textbox to geocode or click on the map to reverse geocode."; + const inputText = document.getElementById('address') as HTMLInputElement; + const submitButton = document.getElementById('submit') as HTMLInputElement; + const clearButton = document.getElementById('clear') as HTMLInputElement; + responseDiv = document.getElementById('response-container') as HTMLDivElement; + response = document.getElementById('response') as HTMLPreElement; - map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText); - map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton); - map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton); - map.controls[google.maps.ControlPosition.LEFT_TOP].push(instructionsElement); - map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv); + marker = new google.maps.marker.AdvancedMarkerElement({ + map: innerMap, + }); - marker = new google.maps.Marker({ - map, - }); + innerMap.addListener('click', (e: google.maps.MapMouseEvent) => { + geocode({ location: e.latLng }); + }); - map.addListener("click", (e: google.maps.MapMouseEvent) => { - geocode({ location: e.latLng }); - }); + submitButton.addEventListener('click', () => + geocode({ address: inputText.value }) + ); - submitButton.addEventListener("click", () => - geocode({ address: inputText.value }) - ); + clearButton.addEventListener('click', () => { + clear(); + }); - clearButton.addEventListener("click", () => { clear(); - }); - - clear(); } -function clear() { - marker.setMap(null); - responseDiv.style.display = "none"; +async function clear() { + marker.setMap(null); + responseDiv.style.display = 'none'; } -function geocode(request: google.maps.GeocoderRequest): void { - clear(); - - geocoder - .geocode(request) - .then((result) => { - const { results } = result; - - map.setCenter(results[0].geometry.location); - marker.setPosition(results[0].geometry.location); - marker.setMap(map); - responseDiv.style.display = "block"; - response.innerText = JSON.stringify(result, null, 2); - return results; - }) - .catch((e) => { - alert("Geocode was not successful for the following reason: " + e); - }); -} +async function geocode(request: google.maps.GeocoderRequest) { + clear(); -declare global { - interface Window { - initMap: () => void; - } + geocoder + .geocode(request) + .then((result) => { + const { results } = result; + innerMap.setCenter(results[0].geometry.location); + marker.position = new google.maps.LatLng(results[0].geometry.location); + mapElement.append(marker); + responseDiv.style.display = 'block'; + response.innerText = JSON.stringify(result, null, 2); + return results; + }) + .catch((e) => { + alert('Geocode was not successful for the following reason: ' + e); + }); } -window.initMap = initMap; + +initMap(); // [END maps_geocoding_simple] -export {}; diff --git a/samples/geocoding-simple/style.css b/samples/geocoding-simple/style.css index 5d7bb659..bf567ccd 100644 --- a/samples/geocoding-simple/style.css +++ b/samples/geocoding-simple/style.css @@ -4,12 +4,9 @@ * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_geocoding_simple] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; +gmp-map { + height: 100%; + width: 100%; } /* @@ -17,83 +14,65 @@ */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } -input[type=text] { - background-color: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); - margin: 10px; - padding: 0 0.5em; - font: 400 18px Roboto, Arial, sans-serif; - overflow: hidden; - line-height: 40px; - margin-right: 0; - min-width: 25%; +#floating-panel { + background-color: #fff; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + margin: 10px; + padding: 5px; + font: 400 18px Roboto, Arial, sans-serif; + width: 350px; + height: 100px } -input[type=button] { - background-color: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); - margin: 10px; - padding: 0 0.5em; - font: 400 18px Roboto, Arial, sans-serif; - overflow: hidden; - height: 40px; - cursor: pointer; - margin-left: 5px; -} -input[type=button]:hover { - background: rgb(235, 235, 235); -} -input[type=button].button-primary { - background-color: #1a73e8; - color: white; +#response-container { + background-color: #fff; + border: 0; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + padding: 5px; + margin: 10px; + font-size: small; + width: 400px; + background-color: rgba(255, 255, 255, 0.95); + max-height: 70vh; + overflow-x: auto; + display: none; } -input[type=button].button-primary:hover { - background-color: #1765cc; + +#address { + width: 100%; + padding: 10px; + margin: 5px 0; + box-sizing: border-box; } -input[type=button].button-secondary { - background-color: white; - color: #1a73e8; + +#submit, +#clear { + background-color: #fff; + border: 0; + border-radius: 2px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + height: 40px; + cursor: pointer; } -input[type=button].button-secondary:hover { - background-color: #d2e3fc; + +#clear:hover { + background: rgb(235, 235, 235); } -#response-container { - background-color: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); - margin: 10px; - padding: 0 0.5em; - font: 400 18px Roboto, Arial, sans-serif; - overflow: hidden; - overflow: auto; - max-height: 50%; - max-width: 90%; - background-color: rgba(255, 255, 255, 0.95); - font-size: small; +#submit { + background-color: #1a73e8; + color: white; } -#instructions { - background-color: #fff; - border: 0; - border-radius: 2px; - box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); - margin: 10px; - padding: 0 0.5em; - font: 400 18px Roboto, Arial, sans-serif; - overflow: hidden; - padding: 1rem; - font-size: medium; +#submit:hover { + background-color: #1765cc; } -/* [END maps_geocoding_simple] */ \ No newline at end of file +/* [END maps_geocoding_simple] */ From 10085956cdf42a6341b9b3451276d28e4956da31 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 21 Jan 2026 10:42:54 -0800 Subject: [PATCH 3/3] Remove TODO comments from index.ts Removed TODO comments regarding JSON formatting issue. --- samples/geocoding-simple/index.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/samples/geocoding-simple/index.ts b/samples/geocoding-simple/index.ts index ece4436e..4031c4af 100644 --- a/samples/geocoding-simple/index.ts +++ b/samples/geocoding-simple/index.ts @@ -4,12 +4,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -/* -TODO: - * Figure out why there's spaces before the result JSON. -*/ - - // [START maps_geocoding_simple] let geocoder: google.maps.Geocoder; let mapElement;