Skip to content

Commit cb75832

Browse files
ejhaseldenchrisjshull
ejhaselden
and
chrisjshull
authored
Refine UI Kit Place Details Compact sample (#1055)
* Refine UI Kit Place Details Compact sample * Update samples/ui-kit-place-details-compact/index.html Co-authored-by: Chris J. Shull <chrisjshull@gmail.com> * Update samples/ui-kit-place-details-compact/index.html Co-authored-by: Chris J. Shull <chrisjshull@gmail.com> * review comments applied * revised * remove overlooked comments * remove extraneous function call * region tag fix * additional review comments * further review --------- Co-authored-by: Chris J. Shull <chrisjshull@gmail.com>
1 parent 529c0a2 commit cb75832

3 files changed

Lines changed: 106 additions & 154 deletions

File tree

‎samples/ui-kit-place-details-compact/index.html‎

Lines changed: 46 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,57 @@
77
<!doctype html>
88
<html>
99
<head>
10-
<title>Click on the map to view place details</title>
10+
<title>Place Details Compact with Google Maps</title>
1111
<meta charset="utf-8" />
12-
<link rel="stylesheet" href="style.css" />
13-
<script type="module" src="./index.js"></script>
12+
<link rel="stylesheet" type="text/css" href="style.css" />
13+
<script type="module" src="./index.js" defer></script>
14+
<!-- prettier-ignore -->
15+
<script>
16+
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
17+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
18+
</script>
1419
</head>
1520
<body>
16-
<!--[START maps_ui_kit_place_details_compact_container]-->
17-
<div id="map-container"></div>
18-
<gmp-place-details-compact orientation="horizontal">
19-
<!--[START maps_ui_kit_place_details_compact_request]-->
21+
<div class="container">
22+
<!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
23+
<gmp-map zoom="17" map-id="DEMO_MAP_ID">
24+
<gmp-advanced-marker></gmp-advanced-marker>
25+
</gmp-map>
26+
</div>
27+
<!--
28+
The gmp-place-details-compact element is styled inline because it is
29+
conditionally rendered and moved into the info window, which is
30+
part of the map's shadow DOM.
31+
-->
32+
<!--[START maps_ui_kit_place_details_compact_map_setup] -->
33+
<gmp-place-details-compact
34+
orientation="horizontal"
35+
truncation-preferred
36+
style="
37+
width: 400px;
38+
padding: 0;
39+
margin: 0;
40+
border: none;
41+
background-color: transparent;
42+
color-scheme: light;
43+
">
2044
<gmp-place-details-place-request
21-
place="ChIJn97JQNpC1moRIcJsVMEQLI8"></gmp-place-details-place-request>
22-
<!--[END maps_ui_kit_place_details_compact_request]-->
23-
<!--[START maps_ui_kit_place_details_compact_config]-->
24-
<gmp-place-all-content></gmp-place-all-content>
25-
<!--[END maps_ui_kit_place_details_compact_config]-->
45+
place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
46+
<!--[END maps_ui_kit_place_details_compact_map_setup] -->
47+
<!--[START maps_ui_kit_place_details_compact_config] -->
48+
<gmp-place-content-config>
49+
<gmp-place-media lightbox-preferred></gmp-place-media>
50+
<gmp-place-rating></gmp-place-rating>
51+
<gmp-place-type></gmp-place-type>
52+
<gmp-place-price></gmp-place-price>
53+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
54+
<gmp-place-open-now-status></gmp-place-open-now-status>
55+
<gmp-place-attribution
56+
light-scheme-color="gray"
57+
dark-scheme-color="white"></gmp-place-attribution>
58+
</gmp-place-content-config>
59+
<!--[END maps_ui_kit_place_details_compact_config] -->
2660
</gmp-place-details-compact>
27-
<!--[END maps_ui_kit_place_details_compact_container]-->
28-
<script>
29-
((g) => {
30-
var h,
31-
a,
32-
k,
33-
p = 'The Google Maps JavaScript API',
34-
c = 'google',
35-
l = 'importLibrary',
36-
q = '__ib__',
37-
m = document,
38-
b = window;
39-
b = b[c] || (b[c] = {});
40-
var d = b.maps || (b.maps = {}),
41-
r = new Set(),
42-
e = new URLSearchParams(),
43-
u = () =>
44-
h ||
45-
(h = new Promise(async (f, n) => {
46-
await (a = m.createElement('script'));
47-
e.set('libraries', [...r] + '');
48-
for (k in g)
49-
e.set(
50-
k.replace(
51-
/[A-Z]/g,
52-
(t) => '_' + t[0].toLowerCase()
53-
),
54-
g[k]
55-
);
56-
e.set('callback', c + '.maps.' + q);
57-
a.src =
58-
`https://maps.${c}apis.com/maps/api/js?` + e;
59-
d[q] = f;
60-
a.onerror = () =>
61-
(h = n(Error(p + ' could not load.')));
62-
a.nonce =
63-
m.querySelector('script[nonce]')?.nonce || '';
64-
m.head.append(a);
65-
}));
66-
d[l]
67-
? console.warn(p + ' only loads once. Ignoring:', g)
68-
: (d[l] = (f, ...n) =>
69-
r.add(f) && u().then(() => d[l](f, ...n)));
70-
})({
71-
key: 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8',
72-
v: 'weekly',
73-
});
74-
</script>
7561
</body>
7662
</html>
7763
<!--[END maps_ui_kit_place_details_compact] -->

‎samples/ui-kit-place-details-compact/index.ts‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,80 @@
1+
'use strict';
12
/*
23
* @license
34
* Copyright 2025 Google LLC. All Rights Reserved.
45
* SPDX-License-Identifier: Apache-2.0
56
*/
67
/* [START maps_ui_kit_place_details_compact] */
78
// Use querySelector to select elements for interaction.
8-
const mapContainer = document.getElementById('map-container') as any;
9+
/* [START maps_ui_kit_place_details_compact_query_selector] */
10+
const map = document.querySelector('gmp-map') as google.maps.MapElement;
911
const placeDetails = document.querySelector('gmp-place-details-compact') as any;
1012
const placeDetailsRequest = document.querySelector(
1113
'gmp-place-details-place-request'
1214
) as any;
13-
let gMap;
14-
let marker;
15-
15+
const marker = document.querySelector(
16+
'gmp-advanced-marker'
17+
) as google.maps.marker.AdvancedMarkerElement;
18+
/* [END maps_ui_kit_place_details_compact_query_selector] */
1619
async function initMap(): Promise<void> {
17-
const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } =
18-
(await google.maps.importLibrary('places')) as any;
19-
const { Map } = (await google.maps.importLibrary(
20+
// Request needed libraries.
21+
Promise.all([
22+
google.maps.importLibrary('marker'),
23+
google.maps.importLibrary('places'),
24+
]);
25+
const { InfoWindow } = (await google.maps.importLibrary(
2026
'maps'
2127
)) as google.maps.MapsLibrary;
2228

23-
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
24-
'marker'
25-
)) as google.maps.MarkerLibrary;
26-
gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
27-
marker = new AdvancedMarkerElement({ map: gMap });
29+
await window.customElements.whenDefined('gmp-map');
30+
// Set the inner map options.
31+
map.innerMap.setOptions({
32+
mapTypeControl: false,
33+
streetViewControl: false,
34+
});
35+
36+
await window.customElements.whenDefined('gmp-advanced-marker');
37+
marker.collisionBehavior =
38+
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
39+
40+
const infoWindow = new InfoWindow();
41+
infoWindow.addListener('close', () => {
42+
marker.position = null;
43+
});
2844

29-
// Hide the map type control.
30-
gMap.setOptions({ mapTypeControl: false });
45+
const showInfoWindow = () => {
46+
if (infoWindow.isOpen) return;
47+
infoWindow.setContent(placeDetails);
48+
infoWindow.open({ anchor: marker });
49+
};
3150

32-
// Set up map, marker, and infowindow once widget is loaded.
33-
placeDetails.style.visibility = 'visible';
3451
placeDetails.addEventListener('gmp-load', (event) => {
35-
console.log('placeDetails initialized!');
36-
updateMapAndMarker();
52+
// 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.
53+
// (The clicked POI LatLng will be a more natural marker position, when available.)
54+
if (!map.center) {
55+
map.center = marker.position = placeDetails.place.location;
56+
showInfoWindow();
57+
}
3758
});
59+
60+
/* [START maps_ui_kit_place_details_compact_event] */
3861
// Add an event listener to handle clicks.
39-
gMap.addListener('click', async (event) => {
62+
map.innerMap.addListener('click', async (event) => {
4063
event.stop();
41-
// Fire when the user clicks on a POI.
64+
4265
if (event.placeId) {
43-
console.log('clicked on POI');
44-
console.log(event.placeId);
66+
// When the user clicks a POI.
67+
marker.position = event.latLng;
4568
placeDetailsRequest.place = event.placeId;
46-
updateMapAndMarker();
69+
showInfoWindow();
4770
} else {
48-
// Fire when the user clicks the map (not on a POI).
71+
// When the user clicks the map (not on a POI).
72+
marker.position = null;
73+
placeDetailsRequest.place = null;
4974
console.log('No place was selected.');
5075
}
5176
});
52-
// Function to update map, marker, and infowindow based on place details
53-
const updateMapAndMarker = () => {
54-
console.log('function called');
55-
if (placeDetails.place && placeDetails.place.location) {
56-
marker.gMap = null;
57-
let adjustedCenter = offsetLatLngRight(
58-
placeDetails.place.location,
59-
0.002
60-
);
61-
gMap.panTo(adjustedCenter);
62-
gMap.setZoom(16); // Set zoom after panning if needed
63-
marker.content = placeDetails;
64-
marker.position = placeDetails.place.location;
65-
} else {
66-
console.log('else');
67-
}
68-
};
6977
}
70-
// Helper function to offset marker placement for better visual appearance.
71-
function offsetLatLngRight(latLng, latitudeOffset) {
72-
const newLat = latLng.lat() + latitudeOffset;
73-
return new google.maps.LatLng(newLat, latLng.lng());
74-
}
75-
78+
/* [END maps_ui_kit_place_details_compact_event] */
7679
initMap();
77-
7880
/* [END maps_ui_kit_place_details_compact] */

‎samples/ui-kit-place-details-compact/style.css‎

Lines changed: 10 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,23 @@
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66
/* [START maps_ui_kit_place_details_compact] */
7+
/*
8+
* Optional: Makes the sample page fill the window.
9+
*/
710
html,
811
body {
9-
display: flex;
10-
width: 100%;
11-
height: 400px;
12+
height: 100%;
1213
margin: 0;
14+
padding: 0;
1315
}
1416

15-
h1 {
16-
font-size: 16px;
17-
text-align: center;
18-
}
19-
20-
#map-container {
21-
box-sizing: border-box;
17+
.container {
18+
display: flex;
19+
height: 100vh;
2220
width: 100%;
2321
}
24-
/* [START maps_ui_kit_place_details_compact_style] */
25-
gmp-place-details-compact {
26-
/* Sets the color for text and icons on the surface */
27-
/* Adapts automatically to the user's system light/dark mode preference */
28-
--gmp-mat-color-on-surface: light-dark(black, white);
29-
/* Sets the background color of the surface */
30-
/* Adapts automatically to the user's system light/dark mode preference */
31-
--gmp-mat-color-surface: light-dark(white, black);
32-
/* Defines the primary font stack used within the component */
33-
--gmp-mat-font-family: Google Sans Text, sans-serif;
34-
/* Defines the style for medium body text (e.g., address, descriptions) */
35-
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em
36-
var(--gmp-mat-font-family, 'Google Sans Text');
37-
38-
width: 360px;
39-
border: none;
40-
padding: 0;
41-
margin: 0;
42-
position: relative;
43-
transform: translate(0, calc(-20px));
44-
}
4522

46-
/* This creates the pointer attached to the bottom of the element. */
47-
gmp-place-details-compact::after {
48-
content: '';
49-
position: absolute;
50-
top: 100%;
51-
left: 50%;
52-
transform: translateX(-50%);
53-
width: 0;
54-
height: 0;
55-
border-left: 16px solid transparent;
56-
border-right: 16px solid transparent;
57-
border-top: 20px solid
58-
var(--gmp-mat-color-surface, light-dark(white, black));
23+
gmp-map {
24+
flex-grow: 1;
5925
}
60-
61-
/* [END maps_ui_kit_place_details_compact_style] */
6226
/* [END maps_ui_kit_place_details_compact] */

0 commit comments

Comments
 (0)