diff --git a/samples/ui-kit-place-details-compact/index.html b/samples/ui-kit-place-details-compact/index.html
index 1385994a..9b50f8b6 100644
--- a/samples/ui-kit-place-details-compact/index.html
+++ b/samples/ui-kit-place-details-compact/index.html
@@ -7,71 +7,57 @@
- Click on the map to view place details
+ Place Details Compact with Google Maps
-
-
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
+ place="ChIJC8HakaIRkFQRiOgkgdHmqkk">
+
+
+
+
+
+
+
+
+
+
+
+
-
-
diff --git a/samples/ui-kit-place-details-compact/index.ts b/samples/ui-kit-place-details-compact/index.ts
index e03d8d25..4ffd67bd 100644
--- a/samples/ui-kit-place-details-compact/index.ts
+++ b/samples/ui-kit-place-details-compact/index.ts
@@ -1,3 +1,4 @@
+'use strict';
/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
@@ -5,74 +6,75 @@
*/
/* [START maps_ui_kit_place_details_compact] */
// Use querySelector to select elements for interaction.
-const mapContainer = document.getElementById('map-container') as any;
+/* [START maps_ui_kit_place_details_compact_query_selector] */
+const map = document.querySelector('gmp-map') as google.maps.MapElement;
const placeDetails = document.querySelector('gmp-place-details-compact') as any;
const placeDetailsRequest = document.querySelector(
'gmp-place-details-place-request'
) as any;
-let gMap;
-let marker;
-
+const marker = document.querySelector(
+ 'gmp-advanced-marker'
+) as google.maps.marker.AdvancedMarkerElement;
+/* [END maps_ui_kit_place_details_compact_query_selector] */
async function initMap(): Promise {
- const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } =
- (await google.maps.importLibrary('places')) as any;
- const { Map } = (await google.maps.importLibrary(
+ // Request needed libraries.
+ Promise.all([
+ google.maps.importLibrary('marker'),
+ google.maps.importLibrary('places'),
+ ]);
+ const { InfoWindow } = (await google.maps.importLibrary(
'maps'
)) as google.maps.MapsLibrary;
- const { AdvancedMarkerElement } = (await google.maps.importLibrary(
- 'marker'
- )) as google.maps.MarkerLibrary;
- gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
- marker = new AdvancedMarkerElement({ map: gMap });
+ await window.customElements.whenDefined('gmp-map');
+ // Set the inner map options.
+ map.innerMap.setOptions({
+ mapTypeControl: false,
+ streetViewControl: false,
+ });
+
+ await window.customElements.whenDefined('gmp-advanced-marker');
+ marker.collisionBehavior =
+ google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
+
+ const infoWindow = new InfoWindow();
+ infoWindow.addListener('close', () => {
+ marker.position = null;
+ });
- // Hide the map type control.
- gMap.setOptions({ mapTypeControl: false });
+ const showInfoWindow = () => {
+ if (infoWindow.isOpen) return;
+ infoWindow.setContent(placeDetails);
+ infoWindow.open({ anchor: marker });
+ };
- // Set up map, marker, and infowindow once widget is loaded.
- placeDetails.style.visibility = 'visible';
placeDetails.addEventListener('gmp-load', (event) => {
- console.log('placeDetails initialized!');
- updateMapAndMarker();
+ // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
+ // (The clicked POI LatLng will be a more natural marker position, when available.)
+ if (!map.center) {
+ map.center = marker.position = placeDetails.place.location;
+ showInfoWindow();
+ }
});
+
+ /* [START maps_ui_kit_place_details_compact_event] */
// Add an event listener to handle clicks.
- gMap.addListener('click', async (event) => {
+ map.innerMap.addListener('click', async (event) => {
event.stop();
- // Fire when the user clicks on a POI.
+
if (event.placeId) {
- console.log('clicked on POI');
- console.log(event.placeId);
+ // When the user clicks a POI.
+ marker.position = event.latLng;
placeDetailsRequest.place = event.placeId;
- updateMapAndMarker();
+ showInfoWindow();
} else {
- // Fire when the user clicks the map (not on a POI).
+ // When the user clicks the map (not on a POI).
+ marker.position = null;
+ placeDetailsRequest.place = null;
console.log('No place was selected.');
}
});
- // Function to update map, marker, and infowindow based on place details
- const updateMapAndMarker = () => {
- console.log('function called');
- if (placeDetails.place && placeDetails.place.location) {
- marker.gMap = null;
- let adjustedCenter = offsetLatLngRight(
- placeDetails.place.location,
- 0.002
- );
- gMap.panTo(adjustedCenter);
- gMap.setZoom(16); // Set zoom after panning if needed
- marker.content = placeDetails;
- marker.position = placeDetails.place.location;
- } else {
- console.log('else');
- }
- };
}
-// Helper function to offset marker placement for better visual appearance.
-function offsetLatLngRight(latLng, latitudeOffset) {
- const newLat = latLng.lat() + latitudeOffset;
- return new google.maps.LatLng(newLat, latLng.lng());
-}
-
+/* [END maps_ui_kit_place_details_compact_event] */
initMap();
-
/* [END maps_ui_kit_place_details_compact] */
diff --git a/samples/ui-kit-place-details-compact/style.css b/samples/ui-kit-place-details-compact/style.css
index cfabe2ea..58d94bda 100644
--- a/samples/ui-kit-place-details-compact/style.css
+++ b/samples/ui-kit-place-details-compact/style.css
@@ -4,59 +4,23 @@
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_ui_kit_place_details_compact] */
+/*
+ * Optional: Makes the sample page fill the window.
+ */
html,
body {
- display: flex;
- width: 100%;
- height: 400px;
+ height: 100%;
margin: 0;
+ padding: 0;
}
-h1 {
- font-size: 16px;
- text-align: center;
-}
-
-#map-container {
- box-sizing: border-box;
+.container {
+ display: flex;
+ height: 100vh;
width: 100%;
}
-/* [START maps_ui_kit_place_details_compact_style] */
-gmp-place-details-compact {
- /* Sets the color for text and icons on the surface */
- /* Adapts automatically to the user's system light/dark mode preference */
- --gmp-mat-color-on-surface: light-dark(black, white);
- /* Sets the background color of the surface */
- /* Adapts automatically to the user's system light/dark mode preference */
- --gmp-mat-color-surface: light-dark(white, black);
- /* Defines the primary font stack used within the component */
- --gmp-mat-font-family: Google Sans Text, sans-serif;
- /* Defines the style for medium body text (e.g., address, descriptions) */
- --gmp-mat-font-body-medium: normal 400 0.875em/1.25em
- var(--gmp-mat-font-family, 'Google Sans Text');
-
- width: 360px;
- border: none;
- padding: 0;
- margin: 0;
- position: relative;
- transform: translate(0, calc(-20px));
-}
-/* This creates the pointer attached to the bottom of the element. */
-gmp-place-details-compact::after {
- content: '';
- position: absolute;
- top: 100%;
- left: 50%;
- transform: translateX(-50%);
- width: 0;
- height: 0;
- border-left: 16px solid transparent;
- border-right: 16px solid transparent;
- border-top: 20px solid
- var(--gmp-mat-color-surface, light-dark(white, black));
+gmp-map {
+ flex-grow: 1;
}
-
-/* [END maps_ui_kit_place_details_compact_style] */
/* [END maps_ui_kit_place_details_compact] */