Skip to content

Commit 018abd8

Browse files
willum070willum070
authored
feat: Adds demo for UI Kit Place Details Compact element. (#342)
* feat: Adds demo for UI Kit Place Details Compact element. * Update style.css * Update index.html Change vertical to horizontal orientation. * Update style.css Change height to 400px.
1 parent 9b64755 commit 018abd8

File tree

6 files changed

+183
-0
lines changed

6 files changed

+183
-0
lines changed

‎samples/ui-kit-place-details-compact/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Google Maps JavaScript Sample
2+
3+
This sample is generated from @googlemaps/js-samples located at
4+
https://github.com/googlemaps-samples/js-api-samples.
5+
6+
## Setup
7+
8+
### Before starting run:
9+
10+
`$npm i`
11+
12+
### Run an example on a local web server
13+
14+
First `cd` to the folder for the sample to run, then:
15+
16+
`$npm start`
17+
18+
### Build an individual example
19+
20+
From `samples/`:
21+
22+
`$npm run build --workspace=sample-name/`
23+
24+
### Build all of the examples.
25+
26+
From `samples/`:
27+
`$npm run build-all`
28+
29+
## Feedback
30+
31+
For feedback related to this sample, please open a new issue on
32+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
33+

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!--
2+
@license
3+
Copyright 2025 Google LLC. All Rights Reserved.
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
<!--[START maps_ui_kit_place_details_compact] -->
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<title>Click on the map to view place details</title>
11+
<meta charset="utf-8">
12+
<link rel="stylesheet" href="style.css">
13+
<script type="module" src="./index.js"></script>
14+
</head>
15+
<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+
<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>
37+
<gmp-advanced-marker></gmp-advanced-marker>
38+
</gmp-map>
39+
<!--[END maps_ui_kit_place_details_compact_container]-->
40+
<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))})
41+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
42+
</body>
43+
</html>
44+
<!--[END maps_ui_kit_place_details_compact] -->

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_ui_kit_place_details_compact] */
7+
// Use querySelector to select elements for interaction.
8+
const map = document.querySelector('gmp-map') as google.maps.MapElement;
9+
//@ts-ignore
10+
const placeDetails = document.querySelector('gmp-place-details-compact') as google.maps.PlaceDetailsElement;
11+
const marker = document.querySelector('gmp-advanced-marker') as any;
12+
13+
async function initMap(): Promise<void> {
14+
// Request needed libraries.
15+
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;
18+
// Hide the map type control.
19+
map.innerMap.setOptions({ mapTypeControl: false });
20+
// Set marker collision behavior.
21+
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
22+
// Add marker to place location.
23+
marker.position = { lat: 47.75972, lng: -122.25094 };
24+
}
25+
initMap();
26+
/* [END maps_ui_kit_place_details_compact] */

‎samples/ui-kit-place-details-compact/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@js-api-samples/ui-kit-place-details-compact",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh ui-kit-place-details-compact && bash ../app.sh ui-kit-place-details-compact && bash ../docs.sh ui-kit-place-details-compact && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details-compact",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}
15+

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_ui_kit_place_details_compact] */
7+
/*
8+
* Optional: Makes the sample page fill the window.
9+
*/
10+
body {
11+
display: flex;
12+
width: 100%;
13+
height: 100%;
14+
}
15+
16+
gmp-map {
17+
height: 400px;
18+
}
19+
/* [START maps_ui_kit_place_details_compact_style] */
20+
gmp-place-details-compact {
21+
/* --- Custom Properties for Color --- */
22+
/* Sets the color for text and icons on the surface */
23+
/* Adapts automatically to the user's system light/dark mode preference */
24+
--gmp-mat-color-on-surface: light-dark(black, white);
25+
/* Sets the background color of the surface */
26+
/* Adapts automatically to the user's system light/dark mode preference */
27+
--gmp-mat-color-surface: light-dark(white, black);
28+
29+
/* --- Custom Properties for Typography --- */
30+
/* Defines the primary font stack used within the component */
31+
--gmp-mat-font-family: Google Sans Text, sans-serif;
32+
/* Defines the style for medium body text (e.g., address, descriptions) */
33+
--gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
34+
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;
45+
overflow-y: hidden;
46+
overflow-x: hidden;
47+
}
48+
/* [END maps_ui_kit_place_details_compact] */

‎samples/ui-kit-place-details-compact/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

0 commit comments

Comments
 (0)