Skip to content

Commit ec00af7

Browse files
ejhaseldenejhaselden
authored
Update demo for UI Kit Place Details Compact element (#359)
1 parent 4e5c6c7 commit ec00af7

File tree

3 files changed

+24
-37
lines changed

3 files changed

+24
-37
lines changed

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

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,22 @@
1515
<body>
1616
<!--[START maps_ui_kit_place_details_compact_container]-->
1717
<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
18-
<div class="widget-container" slot="control-inline-start-block-start">
19-
<gmp-place-details-compact orientation = "horizontal">
20-
<!--[START maps_ui_kit_place_details_compact_request]-->
21-
<gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></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-content-config>
25-
<gmp-place-media lightbox-preferred></gmp-place-media>
26-
<gmp-place-address></gmp-place-address>
27-
<gmp-place-rating></gmp-place-rating>
28-
<gmp-place-type></gmp-place-type>
29-
<gmp-place-price></gmp-place-price>
30-
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
31-
<gmp-place-open-now-status></gmp-place-open-now-status>
32-
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
33-
</gmp-place-content-config>
34-
<!--[END maps_ui_kit_place_details_compact_config]-->
35-
</gmp-place-details-compact>
36-
</div>
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>
3734
<gmp-advanced-marker></gmp-advanced-marker>
3835
</gmp-map>
3936
<!--[END maps_ui_kit_place_details_compact_container]-->

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77
// Use querySelector to select elements for interaction.
88
const map = document.querySelector('gmp-map') as google.maps.MapElement;
99
//@ts-ignore
10-
const placeDetails = document.querySelector('gmp-place-details-compact') as google.maps.PlaceDetailsElement;
1110
const marker = document.querySelector('gmp-advanced-marker') as any;
1211

1312
async function initMap(): Promise<void> {
1413
// Request needed libraries.
1514
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
16-
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
17-
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
15+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
16+
await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
1817
// Hide the map type control.
1918
map.innerMap.setOptions({ mapTypeControl: false });
2019
// Set marker collision behavior.
@@ -23,4 +22,4 @@ async function initMap(): Promise<void> {
2322
marker.position = { lat: 47.75972, lng: -122.25094 };
2423
}
2524
initMap();
26-
/* [END maps_ui_kit_place_details_compact] */
25+
/* [END maps_ui_kit_place_details_compact] */

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

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,26 @@ body {
1414
}
1515

1616
gmp-map {
17-
height: 400px;
17+
height: 600px;
1818
}
1919
/* [START maps_ui_kit_place_details_compact_style] */
2020
gmp-place-details-compact {
21-
/* --- Custom Properties for Color --- */
2221
/* Sets the color for text and icons on the surface */
2322
/* Adapts automatically to the user's system light/dark mode preference */
2423
--gmp-mat-color-on-surface: light-dark(black, white);
2524
/* Sets the background color of the surface */
2625
/* Adapts automatically to the user's system light/dark mode preference */
2726
--gmp-mat-color-surface: light-dark(white, black);
2827

29-
/* --- Custom Properties for Typography --- */
3028
/* Defines the primary font stack used within the component */
3129
--gmp-mat-font-family: Google Sans Text, sans-serif;
3230
/* Defines the style for medium body text (e.g., address, descriptions) */
3331
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
3432

35-
margin: 20px;
36-
width: 400px;
37-
padding: 12px;
38-
margin-top: 10px;
39-
overflow-y: auto;
40-
}
41-
/* [END maps_ui_kit_place_details_compact_style] */
42-
.widget-container {
43-
height: 500px;
44-
width: 457px;
33+
width: 360px;
34+
margin-top: 100px;
4535
overflow-y: hidden;
46-
overflow-x: hidden;
4736
}
37+
/* [END maps_ui_kit_place_details_compact_style] */
38+
4839
/* [END maps_ui_kit_place_details_compact] */

0 commit comments

Comments
 (0)