From d42b0bf2ee0f25a1aa3ecd1973a45826cfcd674f Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 19 Feb 2026 10:54:31 -0800 Subject: [PATCH 1/5] feat: Migrates the event-poi sample to js-api-samples. --- samples/event-poi/README.md | 41 +++++++++++++++ samples/event-poi/index.html | 24 +++++++++ samples/event-poi/index.ts | 91 +++++++++++++++++++++++++++++++++ samples/event-poi/package.json | 14 +++++ samples/event-poi/style.css | 28 ++++++++++ samples/event-poi/tsconfig.json | 17 ++++++ 6 files changed, 215 insertions(+) create mode 100644 samples/event-poi/README.md create mode 100644 samples/event-poi/index.html create mode 100644 samples/event-poi/index.ts create mode 100644 samples/event-poi/package.json create mode 100644 samples/event-poi/style.css create mode 100644 samples/event-poi/tsconfig.json diff --git a/samples/event-poi/README.md b/samples/event-poi/README.md new file mode 100644 index 00000000..c50bfcc6 --- /dev/null +++ b/samples/event-poi/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## event-poi + +This example demonstrates the use of click event listeners on POIs (points of interest). + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/event-poi` +`npm start` + +### Build an individual example + +`cd samples/event-poi` +`npm run build` + +From 'samples': + +`npm run build --workspace=event-poi/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/event-poi` +`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/event-poi/index.html b/samples/event-poi/index.html new file mode 100644 index 00000000..bf4cad13 --- /dev/null +++ b/samples/event-poi/index.html @@ -0,0 +1,24 @@ + + + + + + POI Click Events + + + + + + + + +
+ + + + diff --git a/samples/event-poi/index.ts b/samples/event-poi/index.ts new file mode 100644 index 00000000..0011d2f0 --- /dev/null +++ b/samples/event-poi/index.ts @@ -0,0 +1,91 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_event_poi] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; +let innerMap; +let infowindow: google.maps.InfoWindow; + +async function initMap() { + // Request the needed libraries. + await google.maps.importLibrary('maps'); + + innerMap = await mapElement.innerMap; + + // Create the initial InfoWindow. + infowindow = new google.maps.InfoWindow({}); + + innerMap.addListener('click', (event) => { + // Prevent the default POI info window from showing. + event.stop(); + + // If the event has a placeId, show the info window. + if (isIconMouseEvent(event) && event.placeId) { + showInfoWindow(event); + } else { + // Otherwise, close the info window. + infowindow.close(); + } + }); +} + +// Helper function to show the info window. +async function showInfoWindow(event: google.maps.IconMouseEvent) { + // Retrieve the place details for the selected POI. + const place = await getPlaceDetails(event.placeId); + + // Assemble the info window content. + const content = document.createElement('div'); + const address = document.createElement('div'); + const placeId = document.createElement('div'); + address.textContent = place.formattedAddress || ''; + placeId.textContent = place.id || ''; + content.append(address, placeId); + + // Create an element to use the place name as header content. + const name = document.createElement('div'); + name.style.fontWeight = 'bold'; + name.style.fontSize = 'medium'; + name.textContent = place.displayName || ''; + + // Update info window options. + infowindow.setOptions({ + position: event.latLng, + pixelOffset: new google.maps.Size(0, -30), + headerContent: name, + content: content, + }); + + innerMap.panTo(event.latLng); + infowindow.open(innerMap); +} + +// Helper function to get place details. +async function getPlaceDetails(placeId) { + // Import the Places library. + const { Place } = (await google.maps.importLibrary( + 'places' + )) as google.maps.PlacesLibrary; + + // Create a Place instance with the place id and fetch the details. + const place = new Place({ id: placeId }); + await place.fetchFields({ + fields: ['displayName', 'formattedAddress'], + }); + + // Return the place details. + return place; +} + +// Helper type guard to determine if the event is an IconMouseEvent. +function isIconMouseEvent( + e: google.maps.MapMouseEvent | google.maps.IconMouseEvent +): e is google.maps.IconMouseEvent { + return 'placeId' in e; +} + +initMap(); +// [END maps_event_poi] diff --git a/samples/event-poi/package.json b/samples/event-poi/package.json new file mode 100644 index 00000000..1f408f09 --- /dev/null +++ b/samples/event-poi/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/event-poi", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh event-poi && bash ../app.sh event-poi && bash ../docs.sh event-poi && npm run build:vite --workspace=. && bash ../dist.sh event-poi", + "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/event-poi/style.css b/samples/event-poi/style.css new file mode 100644 index 00000000..08cffc01 --- /dev/null +++ b/samples/event-poi/style.css @@ -0,0 +1,28 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_event_poi] */ + +/* Optional: Makes the sample page fill the window. */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +.title { + font-weight: bold; +} + +#infowindow-content { + display: none; +} + +#map #infowindow-content { + display: inline; +} + +/* [END maps_event_poi] */ diff --git a/samples/event-poi/tsconfig.json b/samples/event-poi/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/event-poi/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 d7b7a85d51baaab1f682d90b9130181b98824b74 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 08:55:57 -0800 Subject: [PATCH 2/5] Remove infowindow-content div from index.html Removed the infowindow-content div from the map. --- samples/event-poi/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/samples/event-poi/index.html b/samples/event-poi/index.html index bf4cad13..8ba42b87 100644 --- a/samples/event-poi/index.html +++ b/samples/event-poi/index.html @@ -17,7 +17,6 @@ -
From 682c42efef04e5696f0ad22283dbf1201e8ec7a7 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 09:02:43 -0800 Subject: [PATCH 3/5] Refactor infowindow handling in event POI sample Refactor initMap and showInfoWindow functions to correctly handle infowindow instance. --- samples/event-poi/index.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/samples/event-poi/index.ts b/samples/event-poi/index.ts index 0011d2f0..982fa5c7 100644 --- a/samples/event-poi/index.ts +++ b/samples/event-poi/index.ts @@ -5,18 +5,20 @@ */ // [START maps_event_poi] -const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; let innerMap; -let infowindow: google.maps.InfoWindow; async function initMap() { // Request the needed libraries. await google.maps.importLibrary('maps'); - innerMap = await mapElement.innerMap; + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + innerMap = mapElement.innerMap; // Create the initial InfoWindow. - infowindow = new google.maps.InfoWindow({}); + let infowindow = new google.maps.InfoWindow({}); innerMap.addListener('click', (event) => { // Prevent the default POI info window from showing. @@ -24,7 +26,7 @@ async function initMap() { // If the event has a placeId, show the info window. if (isIconMouseEvent(event) && event.placeId) { - showInfoWindow(event); + showInfoWindow(event, infowindow); } else { // Otherwise, close the info window. infowindow.close(); @@ -33,7 +35,7 @@ async function initMap() { } // Helper function to show the info window. -async function showInfoWindow(event: google.maps.IconMouseEvent) { +async function showInfoWindow(event: google.maps.IconMouseEvent, infowindow: google.maps.InfoWindow) { // Retrieve the place details for the selected POI. const place = await getPlaceDetails(event.placeId); From 4a12c5608a8eb9283a06c05179c265d6aab16238 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 13:30:35 -0800 Subject: [PATCH 4/5] Refactor infowindow-content styles in CSS Remove infowindow-content styles and update map display. --- samples/event-poi/style.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/samples/event-poi/style.css b/samples/event-poi/style.css index 08cffc01..886609ac 100644 --- a/samples/event-poi/style.css +++ b/samples/event-poi/style.css @@ -17,11 +17,7 @@ body { font-weight: bold; } -#infowindow-content { - display: none; -} - -#map #infowindow-content { +#map { display: inline; } From edf7def759bae8021095d9b09a2eb59fa5ba9541 Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 25 Feb 2026 13:31:22 -0800 Subject: [PATCH 5/5] Remove inline display style from map element --- samples/event-poi/style.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/samples/event-poi/style.css b/samples/event-poi/style.css index 886609ac..287de84b 100644 --- a/samples/event-poi/style.css +++ b/samples/event-poi/style.css @@ -17,8 +17,4 @@ body { font-weight: bold; } -#map { - display: inline; -} - /* [END maps_event_poi] */