Skip to content

Commit 08ee858

Browse files
ejhaseldenwillum070
ejhaselden
and
willum070
authored
Update Places UI Kit Details Compact demo (#503)
Co-authored-by: William French <[email protected]>
1 parent dbc4842 commit 08ee858

File tree

3 files changed

+126
-46
lines changed

3 files changed

+126
-46
lines changed

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

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,24 @@
1313
<script type="module" src="./index.js"></script>
1414
</head>
1515
<body>
16-
<!--[START maps_ui_kit_place_details_compact_container]-->
17-
<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
18-
<gmp-place-details-compact orientation = "horizontal" slot="control-block-start-inline-center">
19-
<!--[START maps_ui_kit_place_details_compact_request]-->
20-
<gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
21-
<!--[END maps_ui_kit_place_details_compact_request]-->
22-
<!--[START maps_ui_kit_place_details_compact_config]-->
23-
<gmp-place-content-config>
24-
<gmp-place-media lightbox-preferred></gmp-place-media>
25-
<gmp-place-rating></gmp-place-rating>
26-
<gmp-place-type></gmp-place-type>
27-
<gmp-place-price></gmp-place-price>
28-
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
29-
<gmp-place-open-now-status></gmp-place-open-now-status>
30-
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
31-
</gmp-place-content-config>
32-
<!--[END maps_ui_kit_place_details_compact_config]-->
33-
</gmp-place-details-compact>
34-
<gmp-advanced-marker></gmp-advanced-marker>
35-
</gmp-map>
36-
<!--[END maps_ui_kit_place_details_compact_container]-->
37-
<script>(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))})
38-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
16+
<!--[START maps_ui_kit_place_details_compact_container]-->
17+
<div id = "map-container">
18+
<gmp-place-details-compact orientation="horizontal">
19+
<!--[START maps_ui_kit_place_details_compact_request]-->
20+
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
21+
<!--[END maps_ui_kit_place_details_compact_request]-->
22+
<!--[START maps_ui_kit_place_details_compact_config]-->
23+
<gmp-place-all-content></gmp-place-all-content>
24+
<!--[END maps_ui_kit_place_details_compact_config]-->
25+
</gmp-place-details-compact>
26+
</div>
27+
<!--[END maps_ui_kit_place_details_compact_container]-->
28+
<script>
29+
(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))})({
30+
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
31+
v: "weekly"
32+
});
33+
</script>
3934
</body>
4035
</html>
4136
<!--[END maps_ui_kit_place_details_compact] -->

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

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,68 @@
55
*/
66
/* [START maps_ui_kit_place_details_compact] */
77
// Use querySelector to select elements for interaction.
8-
const map = document.querySelector('gmp-map') as google.maps.MapElement;
9-
//@ts-ignore
10-
const marker = document.querySelector('gmp-advanced-marker') as any;
8+
const mapContainer = document.getElementById("map-container") as any;
9+
const detailsContainer = document.getElementById("details-container") as any;
10+
const placeDetails = document.querySelector("gmp-place-details-compact") as any;
11+
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any;
12+
let gMap;
13+
let infowindow;
14+
let marker;
1115

1216
async function initMap(): Promise<void> {
13-
// Request needed libraries.
14-
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
15-
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
16-
await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
17-
// Hide the map type control.
18-
map.innerMap.setOptions({ mapTypeControl: false });
19-
// Set marker collision behavior.
20-
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
21-
// Add marker to place location.
22-
marker.position = { lat: 47.75972, lng: -122.25094 };
17+
const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any;
18+
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
19+
20+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
21+
gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
22+
marker = new AdvancedMarkerElement({ map: gMap });
23+
infowindow = new InfoWindow({});
24+
25+
// Hide the map type control.
26+
gMap.setOptions({mapTypeControl: false});
27+
28+
// Set up map, marker, and infowindow once widget is loaded.
29+
placeDetails.style.visibility = 'visible';
30+
placeDetails.addEventListener('gmp-load', (event) => {
31+
console.log("placeDetails initialized!");
32+
updateMapAndMarker();
33+
});
34+
// Add an event listener to handle clicks.
35+
gMap.addListener("click", async (event) => {
36+
marker.position = null;
37+
event.stop();
38+
// Fire when the user clicks on a POI.
39+
if (event.placeId) {
40+
console.log("clicked on POI");
41+
console.log(event.placeId);
42+
placeDetailsRequest.place = event.placeId;
43+
updateMapAndMarker();
44+
}
45+
else {
46+
// Fire when the user clicks the map (not on a POI).
47+
console.log('No place was selected.');
48+
};
49+
});
50+
// Function to update map, marker, and infowindow based on place details
51+
const updateMapAndMarker = () => {
52+
console.log("function called");
53+
if (placeDetails.place && placeDetails.place.location) {
54+
gMap.panTo(placeDetails.place.location);
55+
gMap.setZoom(16); // Set zoom after panning if needed
56+
marker.position = placeDetails.place.location;
57+
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
58+
marker.style.display = 'block';
59+
//@ts-ignore
60+
infowindow.setOptions({
61+
content: placeDetails
62+
});
63+
//@ts-ignore
64+
infowindow.open({
65+
anchor: marker,
66+
map: gMap,
67+
});
68+
}
69+
};
2370
}
2471
initMap();
2572
/* [END maps_ui_kit_place_details_compact] */

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

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,22 @@
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-
*/
7+
html,
108
body {
119
display: flex;
1210
width: 100%;
1311
height: 100%;
12+
margin: 0;
13+
}
14+
15+
h1 {
16+
font-size: 16px;
17+
text-align: center;
1418
}
1519

16-
gmp-map {
17-
height: 600px;
18-
pointer-events: none;
20+
#map-container {
21+
box-sizing: border-box;
22+
width: 100%;
1923
}
2024
/* [START maps_ui_kit_place_details_compact_style] */
2125
gmp-place-details-compact {
@@ -25,16 +29,50 @@ gmp-place-details-compact {
2529
/* Sets the background color of the surface */
2630
/* Adapts automatically to the user's system light/dark mode preference */
2731
--gmp-mat-color-surface: light-dark(white, black);
28-
2932
/* Defines the primary font stack used within the component */
3033
--gmp-mat-font-family: Google Sans Text, sans-serif;
3134
/* Defines the style for medium body text (e.g., address, descriptions) */
3235
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
33-
36+
3437
width: 360px;
35-
margin-top: 100px;
38+
border: none;
3639
overflow-y: hidden;
3740
}
38-
/* [END maps_ui_kit_place_details_compact_style] */
3941

42+
.gm-style-iw button {
43+
display: none !important;
44+
}
45+
46+
.gm-style-iw-c {
47+
padding: 0 !important;
48+
margin: 0 !important;
49+
}
50+
51+
.gm-style-iw-d {
52+
padding: 0 !important;
53+
margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
54+
overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
55+
}
56+
57+
.gm-style-iw-c * { /* Target all elements inside the infowindow content container */
58+
padding: 0 !important;
59+
margin: 0 !important;
60+
}
61+
62+
@media (prefers-color-scheme: dark) {
63+
64+
.gm-style-iw.gm-style-iw-c,
65+
.gm-style .gm-style-iw-d,
66+
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
67+
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
68+
.gm-style .gm-style-iw-c,
69+
.gm-style .gm-style-iw-t::after,
70+
.gm-style .gm-style-iw-tc::after {
71+
background-color: #000 !important;
72+
}
73+
.gm-ui-hover-effect>span {
74+
background-color: #fff !important;
75+
}
76+
}
77+
/* [END maps_ui_kit_place_details_compact_style] */
4078
/* [END maps_ui_kit_place_details_compact] */

0 commit comments

Comments
 (0)