diff --git a/dist/index.html b/dist/index.html index 6358680f..da92948e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -88,6 +88,7 @@

Maps JSAPI Samples

  • event-properties
  • event-simple
  • geocoding-component-restriction
  • +
  • geocoding-place-id
  • geocoding-reverse
  • geocoding-simple
  • hiding-features
  • diff --git a/dist/samples/geocoding-place-id/app/.eslintsrc.json b/dist/samples/geocoding-place-id/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/geocoding-place-id/app/README.md b/dist/samples/geocoding-place-id/app/README.md new file mode 100644 index 00000000..b530ccc6 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/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/dist/samples/geocoding-place-id/app/index.html b/dist/samples/geocoding-place-id/app/index.html new file mode 100644 index 00000000..3aea5b71 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/index.html @@ -0,0 +1,29 @@ + + + + + + Retrieving an Address for a Place ID + + + + + + +
    + + + +
    +
    + + + + + + diff --git a/dist/samples/geocoding-place-id/app/index.ts b/dist/samples/geocoding-place-id/app/index.ts new file mode 100644 index 00000000..401e3d11 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/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/dist/samples/geocoding-place-id/app/package.json b/dist/samples/geocoding-place-id/app/package.json new file mode 100644 index 00000000..e510811a --- /dev/null +++ b/dist/samples/geocoding-place-id/app/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/dist/samples/geocoding-place-id/app/style.css b/dist/samples/geocoding-place-id/app/style.css new file mode 100644 index 00000000..328fa2a6 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/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/dist/samples/geocoding-place-id/app/tsconfig.json b/dist/samples/geocoding-place-id/app/tsconfig.json new file mode 100644 index 00000000..5ba470c0 --- /dev/null +++ b/dist/samples/geocoding-place-id/app/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": [ + "./*.ts", + ] +} diff --git a/dist/samples/geocoding-place-id/dist/assets/index-0uGewDLq.js b/dist/samples/geocoding-place-id/dist/assets/index-0uGewDLq.js new file mode 100644 index 00000000..968b166b --- /dev/null +++ b/dist/samples/geocoding-place-id/dist/assets/index-0uGewDLq.js @@ -0,0 +1 @@ +(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();async function e(){await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`geocoding`),google.maps.importLibrary(`marker`)]);let e=document.querySelector(`gmp-map`).innerMap,n=new google.maps.Geocoder,r=new google.maps.InfoWindow;document.getElementById(`submit`).addEventListener(`click`,()=>{t(n,e,r)})}function t(e,t,n){let r=document.getElementById(`place-id`).value;e.geocode({placeId:r}).then(({results:e})=>{if(e[0]){t.setZoom(11),t.setCenter(e[0].geometry.location);let r=new google.maps.marker.AdvancedMarkerElement({map:t,position:e[0].geometry.location});n.setContent(e[0].formatted_address),n.open(t,r)}else window.alert(`No results found`)}).catch(e=>window.alert(`Geocoder failed due to: `+e))}e(); \ No newline at end of file diff --git a/dist/samples/geocoding-place-id/dist/assets/index-NJcGn26w.css b/dist/samples/geocoding-place-id/dist/assets/index-NJcGn26w.css new file mode 100644 index 00000000..e5e2c2ce --- /dev/null +++ b/dist/samples/geocoding-place-id/dist/assets/index-NJcGn26w.css @@ -0,0 +1 @@ +html,body{height:100%;margin:0;padding:0}#floating-panel{text-align:center;background-color:#fff;border:1px solid #999;border-radius:5px;margin-top:10px;padding:5px 5px 5px 10px;font-family:Roboto,"sans-serif";line-height:30px}#place-id{width:250px} diff --git a/dist/samples/geocoding-place-id/dist/index.html b/dist/samples/geocoding-place-id/dist/index.html new file mode 100644 index 00000000..2332f015 --- /dev/null +++ b/dist/samples/geocoding-place-id/dist/index.html @@ -0,0 +1,29 @@ + + + + + + Retrieving an Address for a Place ID + + + + + + +
    + + + +
    +
    + + + + + + diff --git a/dist/samples/geocoding-place-id/docs/index.html b/dist/samples/geocoding-place-id/docs/index.html new file mode 100644 index 00000000..3aea5b71 --- /dev/null +++ b/dist/samples/geocoding-place-id/docs/index.html @@ -0,0 +1,29 @@ + + + + + + Retrieving an Address for a Place ID + + + + + + +
    + + + +
    +
    + + + + + + diff --git a/dist/samples/geocoding-place-id/docs/index.js b/dist/samples/geocoding-place-id/docs/index.js new file mode 100644 index 00000000..e31643c9 --- /dev/null +++ b/dist/samples/geocoding-place-id/docs/index.js @@ -0,0 +1,47 @@ +"use strict"; +/** + * @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() { + await Promise.all([ + google.maps.importLibrary("maps"), + google.maps.importLibrary("geocoding"), + google.maps.importLibrary("marker"), + ]); + const mapElement = document.querySelector("gmp-map"); + const innerMap = mapElement.innerMap; + const geocoder = new google.maps.Geocoder(); + const infowindow = new google.maps.InfoWindow(); + document.getElementById("submit").addEventListener("click", () => { + geocodePlaceId(geocoder, innerMap, infowindow); + }); +} +// This function is called when the user clicks the UI button. +function geocodePlaceId(geocoder, map, infowindow) { + const placeId = document.getElementById("place-id") + .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/dist/samples/geocoding-place-id/docs/index.ts b/dist/samples/geocoding-place-id/docs/index.ts new file mode 100644 index 00000000..401e3d11 --- /dev/null +++ b/dist/samples/geocoding-place-id/docs/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/dist/samples/geocoding-place-id/docs/style.css b/dist/samples/geocoding-place-id/docs/style.css new file mode 100644 index 00000000..328fa2a6 --- /dev/null +++ b/dist/samples/geocoding-place-id/docs/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/dist/samples/geocoding-place-id/jsfiddle/demo.css b/dist/samples/geocoding-place-id/jsfiddle/demo.css new file mode 100644 index 00000000..7122167c --- /dev/null +++ b/dist/samples/geocoding-place-id/jsfiddle/demo.css @@ -0,0 +1,33 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + +/* + * 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; +} + diff --git a/dist/samples/geocoding-place-id/jsfiddle/demo.details b/dist/samples/geocoding-place-id/jsfiddle/demo.details new file mode 100644 index 00000000..52fcb6b3 --- /dev/null +++ b/dist/samples/geocoding-place-id/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: geocoding-place-id +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/geocoding-place-id/jsfiddle/demo.html b/dist/samples/geocoding-place-id/jsfiddle/demo.html new file mode 100644 index 00000000..2cb8a0f9 --- /dev/null +++ b/dist/samples/geocoding-place-id/jsfiddle/demo.html @@ -0,0 +1,29 @@ + + + + + + Retrieving an Address for a Place ID + + + + + + +
    + + + +
    +
    + + + + + + diff --git a/dist/samples/geocoding-place-id/jsfiddle/demo.js b/dist/samples/geocoding-place-id/jsfiddle/demo.js new file mode 100644 index 00000000..1b2889c2 --- /dev/null +++ b/dist/samples/geocoding-place-id/jsfiddle/demo.js @@ -0,0 +1,47 @@ +"use strict"; +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// Initialize the map. +async function initMap() { + await Promise.all([ + google.maps.importLibrary("maps"), + google.maps.importLibrary("geocoding"), + google.maps.importLibrary("marker"), + ]); + const mapElement = document.querySelector("gmp-map"); + const innerMap = mapElement.innerMap; + const geocoder = new google.maps.Geocoder(); + const infowindow = new google.maps.InfoWindow(); + document.getElementById("submit").addEventListener("click", () => { + geocodePlaceId(geocoder, innerMap, infowindow); + }); +} +// This function is called when the user clicks the UI button. +function geocodePlaceId(geocoder, map, infowindow) { + const placeId = document.getElementById("place-id") + .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(); + diff --git a/index.html b/index.html index 6358680f..da92948e 100644 --- a/index.html +++ b/index.html @@ -88,6 +88,7 @@

    Maps JSAPI Samples

  • event-properties
  • event-simple
  • geocoding-component-restriction
  • +
  • geocoding-place-id
  • geocoding-reverse
  • geocoding-simple
  • hiding-features
  • diff --git a/package-lock.json b/package-lock.json index c99a673c..210cdac3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -739,6 +739,10 @@ "resolved": "samples/geocoding-component-restriction", "link": true }, + "node_modules/@js-api-samples/geocoding-place-id": { + "resolved": "samples/geocoding-place-id", + "link": true + }, "node_modules/@js-api-samples/geocoding-reverse": { "resolved": "samples/geocoding-reverse", "link": true @@ -5653,6 +5657,10 @@ "name": "@js-api-samples/geocoding-component-restriction", "version": "1.0.0" }, + "samples/geocoding-place-id": { + "name": "@js-api-samples/geocoding-place-id", + "version": "1.0.0" + }, "samples/geocoding-reverse": { "name": "@js-api-samples/geocoding-reverse", "version": "1.0.0"