|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright 2026 Google LLC. All Rights Reserved. |
| 4 | + * SPDX-License-Identifier: Apache-2.0 |
| 5 | + */ |
| 6 | + |
| 7 | +// [START maps_event_poi] |
| 8 | +let innerMap; |
| 9 | + |
| 10 | +async function initMap() { |
| 11 | + // Request the needed libraries. |
| 12 | + await google.maps.importLibrary('maps'); |
| 13 | + |
| 14 | + // Retrieve the map element. |
| 15 | + const mapElement = document.querySelector( |
| 16 | + 'gmp-map' |
| 17 | + ) as google.maps.MapElement; |
| 18 | + |
| 19 | + // Get the inner map from the map element. |
| 20 | + innerMap = mapElement.innerMap; |
| 21 | + |
| 22 | + // Create the initial info window. |
| 23 | + let infowindow = new google.maps.InfoWindow({}); |
| 24 | + |
| 25 | + // Add a listener for click events on the map. |
| 26 | + innerMap.addListener('click', (event) => { |
| 27 | + // Prevent the default POI info window from showing. |
| 28 | + event.stop(); |
| 29 | + |
| 30 | + // If the event has a placeId, show the info window. |
| 31 | + if (isIconMouseEvent(event) && event.placeId) { |
| 32 | + showInfoWindow(event, infowindow); |
| 33 | + } else { |
| 34 | + // Close the info window if there is no placeId. |
| 35 | + infowindow.close(); |
| 36 | + } |
| 37 | + }); |
| 38 | +} |
| 39 | + |
| 40 | +// Helper function to show the info window. |
| 41 | +async function showInfoWindow(event: google.maps.IconMouseEvent, infowindow: google.maps.InfoWindow) { |
| 42 | + // Retrieve the place details for the selected POI. |
| 43 | + const place = await getPlaceDetails(event.placeId); |
| 44 | + |
| 45 | + // Assemble the info window content. |
| 46 | + const content = document.createElement('div'); |
| 47 | + const address = document.createElement('div'); |
| 48 | + const placeId = document.createElement('div'); |
| 49 | + address.textContent = place.formattedAddress || ''; |
| 50 | + placeId.textContent = place.id || ''; |
| 51 | + content.append(address, placeId); |
| 52 | + |
| 53 | + // Create an element to use the place name as header content. |
| 54 | + const name = document.createElement('div'); |
| 55 | + name.style.fontWeight = 'bold'; |
| 56 | + name.style.fontSize = 'medium'; |
| 57 | + name.textContent = place.displayName || ''; |
| 58 | + |
| 59 | + // Update info window options. |
| 60 | + infowindow.setOptions({ |
| 61 | + position: event.latLng, |
| 62 | + pixelOffset: new google.maps.Size(0, -30), |
| 63 | + headerContent: name, |
| 64 | + content: content, |
| 65 | + }); |
| 66 | + |
| 67 | + innerMap.panTo(event.latLng); |
| 68 | + infowindow.open(innerMap); |
| 69 | +} |
| 70 | + |
| 71 | +// Helper function to get place details. |
| 72 | +async function getPlaceDetails(placeId) { |
| 73 | + // Import the Places library. |
| 74 | + const { Place } = (await google.maps.importLibrary( |
| 75 | + 'places' |
| 76 | + )) as google.maps.PlacesLibrary; |
| 77 | + |
| 78 | + // Create a Place instance with the place id and fetch the details. |
| 79 | + const place = new Place({ id: placeId }); |
| 80 | + await place.fetchFields({ |
| 81 | + fields: ['displayName', 'formattedAddress'], |
| 82 | + }); |
| 83 | + |
| 84 | + // Return the place details. |
| 85 | + return place; |
| 86 | +} |
| 87 | + |
| 88 | +// Helper type guard to determine if the event is an IconMouseEvent. |
| 89 | +function isIconMouseEvent( |
| 90 | + e: google.maps.MapMouseEvent | google.maps.IconMouseEvent |
| 91 | +): e is google.maps.IconMouseEvent { |
| 92 | + return 'placeId' in e; |
| 93 | +} |
| 94 | + |
| 95 | +initMap(); |
| 96 | +// [END maps_event_poi] |
0 commit comments