Skip to content

Commit 8be9282

Browse files
ejhaseldennoelle-jungwillum070
authored
Refine UI Kit Place Details sample (#1071)
* Refine UI Kit Place Details sample * Update samples/ui-kit-place-details/index.html Co-authored-by: noelle-jung <95318536+noelle-jung@users.noreply.github.com> --------- Co-authored-by: noelle-jung <95318536+noelle-jung@users.noreply.github.com> Co-authored-by: William French <wfrench@google.com>
1 parent 13d36eb commit 8be9282

3 files changed

Lines changed: 60 additions & 98 deletions

File tree

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

Lines changed: 35 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,70 +7,46 @@
77
<!doctype html>
88
<html>
99
<head>
10-
<title>Click on the map to view place details</title>
10+
<title>Place Details 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>
1621
<!--[START maps_ui_kit_place_details_map] -->
17-
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
18-
<gmp-advanced-marker></gmp-advanced-marker>
19-
</gmp-map>
20-
<!--[END maps_ui_kit_place_details_map] -->
21-
<!--[START maps_ui_kit_place_details_container] -->
22-
<div class="widget-container" slot="control-inline-start-block-start">
23-
<gmp-place-details>
24-
<gmp-place-details-place-request
25-
place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
26-
<gmp-place-all-content></gmp-place-all-content>
27-
</gmp-place-details>
22+
<div class="container">
23+
<!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
24+
<gmp-map zoom="17" map-id="DEMO_MAP_ID">
25+
<gmp-advanced-marker></gmp-advanced-marker>
26+
</gmp-map>
27+
<div class="ui-panel">
28+
<gmp-place-details>
29+
<gmp-place-details-place-request
30+
place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
31+
<gmp-place-content-config>
32+
<gmp-place-address></gmp-place-address>
33+
<gmp-place-rating></gmp-place-rating>
34+
<gmp-place-type></gmp-place-type>
35+
<gmp-place-price></gmp-place-price>
36+
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
37+
<gmp-place-opening-hours></gmp-place-opening-hours>
38+
<gmp-place-website></gmp-place-website>
39+
<gmp-place-phone-number></gmp-place-phone-number>
40+
<gmp-place-summary></gmp-place-summary>
41+
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
42+
<gmp-place-review-summary></gmp-place-review-summary>
43+
<gmp-place-reviews></gmp-place-reviews>
44+
<gmp-place-feature-list></gmp-place-feature-list>
45+
</gmp-place-content-config>
46+
</gmp-place-details>
47+
</div>
2848
</div>
29-
<!--[END maps_ui_kit_place_details_container] -->
30-
<script>
31-
((g) => {
32-
var h,
33-
a,
34-
k,
35-
p = 'The Google Maps JavaScript API',
36-
c = 'google',
37-
l = 'importLibrary',
38-
q = '__ib__',
39-
m = document,
40-
b = window;
41-
b = b[c] || (b[c] = {});
42-
var d = b.maps || (b.maps = {}),
43-
r = new Set(),
44-
e = new URLSearchParams(),
45-
u = () =>
46-
h ||
47-
(h = new Promise(async (f, n) => {
48-
await (a = m.createElement('script'));
49-
e.set('libraries', [...r] + '');
50-
for (k in g)
51-
e.set(
52-
k.replace(
53-
/[A-Z]/g,
54-
(t) => '_' + t[0].toLowerCase()
55-
),
56-
g[k]
57-
);
58-
e.set('callback', c + '.maps.' + q);
59-
a.src =
60-
`https://maps.${c}apis.com/maps/api/js?` + e;
61-
d[q] = f;
62-
a.onerror = () =>
63-
(h = n(Error(p + ' could not load.')));
64-
a.nonce =
65-
m.querySelector('script[nonce]')?.nonce || '';
66-
m.head.append(a);
67-
}));
68-
d[l]
69-
? console.warn(p + ' only loads once. Ignoring:', g)
70-
: (d[l] = (f, ...n) =>
71-
r.add(f) && u().then(() => d[l](f, ...n)));
72-
})({ key: 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8', v: 'weekly' });
73-
</script>
49+
<!--[END maps_ui_kit_place_details_map] -->
7450
</body>
7551
</html>
7652
<!--[END maps_ui_kit_place_details] -->

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

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,31 @@
66
/* [START maps_ui_kit_place_details] */
77
// Use querySelector to select elements for interaction.
88
/* [START maps_ui_kit_place_details_query_selector] */
9-
const map = document.querySelector('gmp-map') as any;
9+
const map = document.querySelector('gmp-map') as google.maps.MapElement;
1010
const placeDetails = document.querySelector('gmp-place-details') as any;
1111
const placeDetailsRequest = document.querySelector(
1212
'gmp-place-details-place-request'
1313
) as any;
14-
const marker = document.querySelector('gmp-advanced-marker') as any;
14+
const marker = document.querySelector(
15+
'gmp-advanced-marker'
16+
) as google.maps.marker.AdvancedMarkerElement;
1517
/* [END maps_ui_kit_place_details_query_selector] */
1618

17-
let center = { lat: 47.759737, lng: -122.250632 };
18-
1919
async function initMap(): Promise<void> {
2020
// Request needed libraries.
21-
(await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
22-
(await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
23-
(await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
21+
await Promise.all([
22+
google.maps.importLibrary('maps'),
23+
google.maps.importLibrary('marker'),
24+
google.maps.importLibrary('places'),
25+
]);
2426

2527
// Hide the map type control.
2628
map.innerMap.setOptions({ mapTypeControl: false });
2729

2830
// Function to update map and marker based on place details
2931
const updateMapAndMarker = () => {
3032
if (placeDetails.place && placeDetails.place.location) {
31-
let adjustedCenter = offsetLatLngRight(
32-
placeDetails.place.location,
33-
-0.005
34-
);
35-
map.innerMap.panTo(adjustedCenter);
33+
map.innerMap.panTo(placeDetails.place.location);
3634
map.innerMap.setZoom(16); // Set zoom after panning if needed
3735
marker.position = placeDetails.place.location;
3836
marker.collisionBehavior =
@@ -64,11 +62,5 @@ async function initMap(): Promise<void> {
6462
}
6563
/* [END maps_ui_kit_place_details_event] */
6664

67-
// Helper function to offset marker placement for better visual appearance.
68-
function offsetLatLngRight(latLng, longitudeOffset) {
69-
const newLng = latLng.lng() + longitudeOffset;
70-
return new google.maps.LatLng(latLng.lat(), newLng);
71-
}
72-
7365
initMap();
7466
/* [END maps_ui_kit_place_details] */

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

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,30 @@
99
*/
1010
html,
1111
body {
12-
display: flex; /* Use flexbox for layout */
13-
justify-content: center; /* Center the content horizontally */
14-
align-items: flex-start; /* Align items to the top */
15-
width: 100%;
12+
height: 100%;
13+
margin: 0;
14+
padding: 0;
1615
}
1716

18-
h1 {
19-
font-size: 16px;
20-
text-align: center;
17+
.container {
18+
display: flex;
19+
height: 100vh;
20+
width: 100%;
2121
}
2222

2323
gmp-map {
24-
height: 500px;
24+
flex-grow: 1;
2525
}
2626

27-
gmp-place-details {
28-
border-radius: 0px;
29-
margin: 20px;
27+
.ui-panel {
3028
width: 400px;
31-
height: 500px;
32-
margin-top: 0px;
29+
margin-left: 20px;
30+
margin-top: 10px;
3331
}
3432

35-
gmp-advanced-marker {
36-
display: none;
37-
}
38-
39-
.widget-container {
40-
min-width: 400px;
41-
overflow-y: none;
42-
overflow-x: none;
33+
gmp-place-details {
34+
width: 100%;
35+
margin: 0;
36+
border: none;
4337
}
4438
/* [END maps_ui_kit_place_details] */

0 commit comments

Comments
 (0)