From 189861980f6125d45f1038902163725e2828f583 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 22 Apr 2026 07:32:36 -0700 Subject: [PATCH] feat: Migrates the geocoding-place-id sample to js-api-samples. --- samples/geocoding-place-id/README.md | 41 ++++++++++++++++ samples/geocoding-place-id/index.html | 29 ++++++++++++ samples/geocoding-place-id/index.ts | 59 ++++++++++++++++++++++++ samples/geocoding-place-id/package.json | 14 ++++++ samples/geocoding-place-id/style.css | 34 ++++++++++++++ samples/geocoding-place-id/tsconfig.json | 9 ++++ 6 files changed, 186 insertions(+) create mode 100644 samples/geocoding-place-id/README.md create mode 100644 samples/geocoding-place-id/index.html create mode 100644 samples/geocoding-place-id/index.ts create mode 100644 samples/geocoding-place-id/package.json create mode 100644 samples/geocoding-place-id/style.css create mode 100644 samples/geocoding-place-id/tsconfig.json diff --git a/samples/geocoding-place-id/README.md b/samples/geocoding-place-id/README.md new file mode 100644 index 000000000..b530ccc65 --- /dev/null +++ b/samples/geocoding-place-id/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## geocoding-place-id + +This sample demonstrates how to geocode a Place ID. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/geocoding-place-id` +`npm start` + +### Build an individual example + +`cd samples/geocoding-place-id` +`npm run build` + +From 'samples': + +`npm run build --workspace=geocoding-place-id/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/geocoding-place-id` +`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-place-id/index.html b/samples/geocoding-place-id/index.html new file mode 100644 index 000000000..3aea5b712 --- /dev/null +++ b/samples/geocoding-place-id/index.html @@ -0,0 +1,29 @@ + + + + + + Retrieving an Address for a Place ID + + + + + + +
+ + + +
+ + + + + + + diff --git a/samples/geocoding-place-id/index.ts b/samples/geocoding-place-id/index.ts new file mode 100644 index 000000000..401e3d118 --- /dev/null +++ b/samples/geocoding-place-id/index.ts @@ -0,0 +1,59 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_geocoding_place_id] +// Initialize the map. +async function initMap(): Promise { + await Promise.all([ + google.maps.importLibrary("maps"), + google.maps.importLibrary("geocoding"), + google.maps.importLibrary("marker"), + ]); + + const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; + const innerMap = mapElement.innerMap; + const geocoder = new google.maps.Geocoder(); + const infowindow = new google.maps.InfoWindow(); + + (document.getElementById("submit") as HTMLElement).addEventListener( + "click", + () => { + geocodePlaceId(geocoder, innerMap, infowindow); + } + ); +} + +// This function is called when the user clicks the UI button. +function geocodePlaceId( + geocoder: google.maps.Geocoder, + map: google.maps.Map, + infowindow: google.maps.InfoWindow +) { + const placeId = (document.getElementById("place-id") as HTMLInputElement) + .value; + + geocoder + .geocode({ placeId: placeId }) + .then(({ results }) => { + if (results[0]) { + map.setZoom(11); + map.setCenter(results[0].geometry.location); + + const marker = new google.maps.marker.AdvancedMarkerElement({ + map, + position: results[0].geometry.location, + }); + + infowindow.setContent(results[0].formatted_address); + infowindow.open(map, marker); + } else { + window.alert("No results found"); + } + }) + .catch((e) => window.alert("Geocoder failed due to: " + e)); +} + +initMap(); +// [END maps_geocoding_place_id] diff --git a/samples/geocoding-place-id/package.json b/samples/geocoding-place-id/package.json new file mode 100644 index 000000000..e510811a7 --- /dev/null +++ b/samples/geocoding-place-id/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/geocoding-place-id", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh geocoding-place-id && bash ../app.sh geocoding-place-id && bash ../docs.sh geocoding-place-id && npm run build:vite --workspace=. && bash ../dist.sh geocoding-place-id", + "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-place-id/style.css b/samples/geocoding-place-id/style.css new file mode 100644 index 000000000..328fa2a65 --- /dev/null +++ b/samples/geocoding-place-id/style.css @@ -0,0 +1,34 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_geocoding_place_id] */ + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +#floating-panel { + background-color: #fff; + padding: 5px; + border: 1px solid #999; + border-radius: 5px; + text-align: center; + font-family: "Roboto", "sans-serif"; + line-height: 30px; + padding-left: 10px; + margin-top: 10px; +} + +#place-id { + width: 250px; +} + +/* [END maps_geocoding_place_id] */ \ No newline at end of file diff --git a/samples/geocoding-place-id/tsconfig.json b/samples/geocoding-place-id/tsconfig.json new file mode 100644 index 000000000..5ba470c05 --- /dev/null +++ b/samples/geocoding-place-id/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": [ + "./*.ts", + ] +}