Skip to content

Commit 5636c84

Browse files
willum070willum070
authored
feat: Adds UI Kit place details and place search examples. (#275)
* feat: Adds UI Kit place details and place search examples. * feat: Adds UI Kit place details and place search examples.
1 parent bd2bfd8 commit 5636c84

File tree

12 files changed

+516
-0
lines changed

12 files changed

+516
-0
lines changed

‎samples/ui-kit-place-details/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/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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] -->
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+
<h1>Click on the map to view place details</h1>
17+
<!--[START maps_ui_kit_place_details_map] -->
18+
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID" style="height: 400px">
19+
<gmp-place-details
20+
size="x-large"
21+
slot="control-inline-start-block-start"></gmp-place-details>
22+
<gmp-advanced-marker></gmp-advanced-marker>
23+
</gmp-map>
24+
<!--[END maps_ui_kit_place_details_map] -->
25+
<script
26+
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
27+
defer
28+
></script>
29+
</body>
30+
</html>
31+
<!--[END maps_ui_kit_place_details] -->

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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] */
7+
// Use querySelector to select elements for interaction.
8+
/* [START maps_ui_kit_place_details_query_selector] */
9+
const map = document.querySelector('gmp-map') as any;
10+
const placeDetails = document.querySelector('gmp-place-details') as any;
11+
const marker = document.querySelector('gmp-advanced-marker') as any;
12+
/* [END maps_ui_kit_place_details_query_selector] */
13+
14+
async function initMap(): Promise<void> {
15+
// Request needed libraries.
16+
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
17+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
18+
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
19+
20+
// Calls the geolocation helper function to center the map on the current
21+
// device location.
22+
findCurrentLocation();
23+
24+
// Hide the map type control.
25+
map.innerMap.setOptions({mapTypeControl: false});
26+
27+
/* [START maps_ui_kit_place_details_event] */
28+
// Add an event listener to handle map clicks.
29+
map.innerMap.addListener('click', async (event) => {
30+
marker.position = null;
31+
event.stop();
32+
placeDetails.style.visibility = 'visible';
33+
if (event.placeId) {
34+
// Fire when the user clicks a POI.
35+
await placeDetails.configureFromPlace({id: event.placeId});
36+
} else {
37+
// Fire when the user clicks the map (not on a POI).
38+
await placeDetails.configureFromLocation(event.latLng);
39+
}
40+
// Show the marker at the selected place.
41+
marker.position = placeDetails.place.location;
42+
marker.style.display = 'block';
43+
});
44+
}
45+
/* [END maps_ui_kit_place_details_event] */
46+
47+
// Helper function for geolocation.
48+
async function findCurrentLocation() {
49+
const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
50+
if (navigator.geolocation) {
51+
navigator.geolocation.getCurrentPosition(
52+
(position) => {
53+
const pos =
54+
new LatLng(position.coords.latitude, position.coords.longitude);
55+
map.innerMap.panTo(pos);
56+
map.innerMap.setZoom(16);
57+
},
58+
() => {
59+
console.log('The Geolocation service failed.');
60+
map.innerMap.setZoom(16);
61+
},
62+
);
63+
} else {
64+
console.log('Your browser doesn\'t support geolocation');
65+
map.innerMap.setZoom(16);
66+
}
67+
}
68+
69+
declare global {
70+
interface Window {
71+
initMap: () => void;
72+
}
73+
}
74+
window.initMap = initMap;
75+
/* [END maps_ui_kit_place_details] */
76+
export {};

‎samples/ui-kit-place-details/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",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh ui-kit-place-details && bash ../app.sh ui-kit-place-details && bash ../docs.sh ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh ui-kit-place-details",
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/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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] */
7+
/*
8+
* Optional: Makes the sample page fill the window.
9+
*/
10+
html,
11+
body {
12+
height: 100%;
13+
margin: 0;
14+
font-family: Arial, Helvetica, sans-serif;
15+
}
16+
17+
h1 {
18+
font-size: 16px;
19+
text-align: center;
20+
}
21+
22+
gmp-map {
23+
height: 400px;
24+
}
25+
26+
gmp-place-details {
27+
visibility: hidden;
28+
background-color: #fff;
29+
border-radius: 8px;
30+
margin: 20px;
31+
width: 400px;
32+
}
33+
34+
gmp-advanced-marker {
35+
display: none;
36+
}
37+
/* [END maps_ui_kit_place_details] */

‎samples/ui-kit-place-details/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+
}

‎samples/ui-kit-place-search/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-search/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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_search] -->
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<title>Place List Nearby Search with Google Maps</title>
11+
<meta charset="utf-8">
12+
<link rel="stylesheet" type="text/css" href="style.css">
13+
<script type="module" src="./index.js"></script>
14+
</head>
15+
<body>
16+
<h1>Place List Nearby Search with Google Maps</h1>
17+
<!--[START maps_ui_kit_place_search_map] -->
18+
<gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
19+
<div class="overlay" slot="control-inline-start-block-start">
20+
<div class="controls">
21+
<select name="types" class="type-select">
22+
<option value="">Select a place type</option>
23+
<option value="cafe">Cafe</option>
24+
<option value="restaurant">Restaurant</option>
25+
<option value="electric_vehicle_charging_station">
26+
EV charging station
27+
</option>
28+
</select>
29+
</div>
30+
<div class="list-container">
31+
<gmp-place-list selectable></gmp-place-list>
32+
</div>
33+
</div>
34+
<gmp-place-details size="large"></gmp-place-details>
35+
</gmp-map>
36+
<!--[END maps_ui_kit_place_search_map] -->
37+
<script
38+
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps&callback=initMap&v=alpha"
39+
defer
40+
></script>
41+
</body>
42+
</html>
43+
<!--[END maps_ui_kit_place_search] -->

0 commit comments

Comments
 (0)