Skip to content

Refine UI Kit Place Details Compact sample #1055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ejhaselden wants to merge 3 commits into
base: main
Choose a base branch
from
+102 −151
Open

Refine UI Kit Place Details Compact sample #1055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd952d0
Refine UI Kit Place Details Compact sample
ejhaselden Jan 26, 2026
e17c3b4
Update samples/ui-kit-place-details-compact/index.html
ejhaselden Jan 27, 2026
4ea9e9f
Update samples/ui-kit-place-details-compact/index.html
ejhaselden Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 49 additions & 60 deletions samples/ui-kit-place-details-compact/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,71 +7,60 @@
<!doctype html>
<html>
<head>
<title>Click on the map to view place details</title>
<title>Place Details Compact with Google Maps</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="module" src="./index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="module" src="./index.js" defer></script>
<!-- prettier-ignore -->
<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))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
</script>
</head>
<body>
<!--[START maps_ui_kit_place_details_compact_container]-->
<div id="map-container"></div>
<gmp-place-details-compact orientation="horizontal">
<!--[START maps_ui_kit_place_details_compact_request]-->
<div class="container">
<!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
<gmp-map
center="47.759737, -122.250632"
zoom="16"
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggest leaving off the center and zoom, as the fitBounds() call later will cover that (and that would avoid a transition post-load)

map-id="DEMO_MAP_ID">
<gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
</div>
<!--
The gmp-place-details-compact element is styled inline because it is
conditionally rendered and moved into the info window, which is
part of the map's shadow DOM.
-->
<!--[START maps_ui_kit_place_details_map_compact_setup] -->
<gmp-place-details-compact
orientation="horizontal"
truncation-preferred
style="
width: 400px;
padding: 0;
margin: 0;
border: none;
background-color: transparent;
color-scheme: light;
">
<gmp-place-details-place-request
place="ChIJn97JQNpC1moRIcJsVMEQLI8"></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_request]-->
<!--[START maps_ui_kit_place_details_compact_config]-->
<gmp-place-all-content></gmp-place-all-content>
<!--[END maps_ui_kit_place_details_compact_config]-->
place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<!--[END maps_ui_kit_place_details_compact_setup] -->
<!--[START maps_ui_kit_place_details_compact_config] -->
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
<gmp-place-rating></gmp-place-rating>
<gmp-place-type></gmp-place-type>
<gmp-place-price></gmp-place-price>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
<gmp-place-open-now-status></gmp-place-open-now-status>
<gmp-place-attribution
light-scheme-color="gray"
dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>
<!--[END maps_ui_kit_place_details_compact_config] -->
</gmp-place-details-compact>
<!--[END maps_ui_kit_place_details_compact_container]-->
<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)));
})({
key: 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8',
v: 'weekly',
});
</script>
</body>
</html>
<!--[END maps_ui_kit_place_details_compact] -->
88 changes: 43 additions & 45 deletions samples/ui-kit-place-details-compact/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,74 +5,72 @@
*/
/* [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<void> {
const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } =
(await google.maps.importLibrary('places')) as any;
const { Map } = (await google.maps.importLibrary(
'maps'
)) as google.maps.MapsLibrary;
// Request needed libraries.
await Promise.all([
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
await Promise.all([
Promise.all([

I think we can tweak this to avoid strictly blocking on all these things up front

google.maps.importLibrary('maps'),
google.maps.importLibrary('marker'),
google.maps.importLibrary('places'),
]);

const { AdvancedMarkerElement } = (await google.maps.importLibrary(
'marker'
)) as google.maps.MarkerLibrary;
gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
marker = new AdvancedMarkerElement({ map: gMap });
// Set the map options.
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Set the map options.
await window.customElements.whenDefined('gmp-map');
// Set the map options.

map.innerMap.setOptions({
mapTypeControl: false,
streetViewControl: false,
});

// Set up the info window.
const infoWindow = new google.maps.InfoWindow({});
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we avoid google.maps... here and access via importLibrary instead?


// Hide the map type control.
gMap.setOptions({ mapTypeControl: false });
// Function to update map and marker based on place details
const updateMapAndMarker = () => {
if (placeDetails.place && placeDetails.place.location) {
const placeViewport = placeDetails.place.viewport;
map.innerMap.fitBounds(placeViewport, 0);
marker.position = placeDetails.place.location;
marker.collisionBehavior =
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
marker.style.display = 'block';
infoWindow.close();
infoWindow.setContent(placeDetails);
infoWindow.open({ map: map.innerMap, anchor: marker });
}
Comment on lines +38 to +48
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (placeDetails.place && placeDetails.place.location) {
const placeViewport = placeDetails.place.viewport;
map.innerMap.fitBounds(placeViewport, 0);
marker.position = placeDetails.place.location;
marker.collisionBehavior =
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
marker.style.display = 'block';
infoWindow.close();
infoWindow.setContent(placeDetails);
infoWindow.open({ map: map.innerMap, anchor: marker });
}
if (!placeDetails.place?.location) return;
const placeViewport = placeDetails.place.viewport;
map.innerMap.fitBounds(placeViewport, 0);
marker.position = placeDetails.place.location;
marker.collisionBehavior =
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
infoWindow.close();
infoWindow.setContent(placeDetails);
infoWindow.open({anchor: marker});

and then auto-reformat for indentation

};

// Set up map, marker, and infowindow once widget is loaded.
placeDetails.style.visibility = 'visible';
// Set up map once widget is loaded.
placeDetails.addEventListener('gmp-load', (event) => {
console.log('placeDetails initialized!');
updateMapAndMarker();
});

/* [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) => {
marker.position = null;
event.stop();
// Fire when the user clicks on a POI.
if (event.placeId) {
console.log('clicked on POI');
console.log(event.placeId);
// Fire when the user clicks a POI.
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Fire when the user clicks a POI.
// When the user clicks a POI.

placeDetailsRequest.place = event.placeId;
updateMapAndMarker();
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
updateMapAndMarker();

I think remove this here, and just let gmp-load on the details view trigger it?

} else {
// Fire when the user clicks the map (not on a POI).
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Fire when the user clicks the map (not on a POI).
// When the user clicks the map (not on a POI).

console.log('No place was selected.');
marker.style.display = 'none';
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
marker.style.display = 'none';

infoWindow.close();
Copy link

@chrisjshull chrisjshull Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
infoWindow.close();

should happen automatically because it's attached to the marker

}
});
// 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] */
56 changes: 10 additions & 46 deletions samples/ui-kit-place-details-compact/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] */
Loading