Skip to content

Commit fbddca4

Browse files
Update dist folder [skip ci] (#288)
Co-authored-by: googlemaps-bot <[email protected]>
1 parent 7689941 commit fbddca4

File tree

15 files changed

+160
-140
lines changed

15 files changed

+160
-140
lines changed

dist/samples/ui-kit-place-details/app/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
</head>
1515
<body>
1616
<!--[START maps_ui_kit_place_details_map] -->
17-
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
18-
<gmp-place-details
19-
size="x-large"
20-
slot="control-inline-start-block-start"></gmp-place-details>
17+
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
18+
<div class="widget-container" slot="control-inline-start-block-start">
19+
<gmp-place-details size="x-large"></gmp-place-details>
20+
</div>
2121
<gmp-advanced-marker></gmp-advanced-marker>
2222
</gmp-map>
2323
<!--[END maps_ui_kit_place_details_map] -->

dist/samples/ui-kit-place-details/app/index.ts

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,60 +11,58 @@ const placeDetails = document.querySelector('gmp-place-details') as any;
1111
const marker = document.querySelector('gmp-advanced-marker') as any;
1212
/* [END maps_ui_kit_place_details_query_selector] */
1313

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;
14+
let center = { lat: 47.759737, lng: -122.250632 };
1915

20-
// Calls the geolocation helper function to center the map on the current
21-
// device location.
22-
findCurrentLocation();
16+
async function initMap(): Promise<void> {
17+
// Request needed libraries.
18+
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
19+
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
20+
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
2321

2422
// Hide the map type control.
2523
map.innerMap.setOptions({mapTypeControl: false});
2624

25+
// Set the default selection.
26+
const place = new Place({
27+
id: "ChIJC8HakaIRkFQRiOgkgdHmqkk",
28+
requestedLanguage: "en", // optional
29+
});
30+
await placeDetails.configureFromPlace(place);
31+
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
32+
map.innerMap.panTo(adjustedCenter);
33+
map.innerMap.setZoom(16);
34+
35+
marker.position = placeDetails.place.location;
36+
marker.style.display = 'block';
37+
2738
/* [START maps_ui_kit_place_details_event] */
2839
// Add an event listener to handle map clicks.
2940
map.innerMap.addListener('click', async (event) => {
3041
marker.position = null;
3142
event.stop();
32-
placeDetails.style.visibility = 'visible';
3343
if (event.placeId) {
3444
// Fire when the user clicks a POI.
3545
await placeDetails.configureFromPlace({id: event.placeId});
3646
} else {
3747
// Fire when the user clicks the map (not on a POI).
3848
await placeDetails.configureFromLocation(event.latLng);
3949
}
50+
// Get the offset center.
51+
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
52+
4053
// Show the marker at the selected place.
4154
marker.position = placeDetails.place.location;
4255
marker.style.display = 'block';
56+
map.innerMap.panTo(adjustedCenter);
4357
});
4458
}
45-
/* [END maps_ui_kit_place_details_event] */
4659

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-
}
60+
// Helper function to offset the map center.
61+
function offsetLatLngRight(latLng, longitudeOffset) {
62+
const newLng = latLng.lng() + longitudeOffset;
63+
return new google.maps.LatLng(latLng.lat(), newLng);
6764
}
65+
/* [END maps_ui_kit_place_details_event] */
6866

6967
declare global {
7068
interface Window {

dist/samples/ui-kit-place-details/app/style.css

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ body {
1212
height: 100%;
1313
margin: 0;
1414
font-family: Arial, Helvetica, sans-serif;
15+
display: block;
1516
}
1617

1718
h1 {
@@ -20,18 +21,27 @@ h1 {
2021
}
2122

2223
gmp-map {
23-
height: 800px;
24+
height: 400px;
2425
}
2526

2627
gmp-place-details {
27-
visibility: hidden;
2828
background-color: #fff;
2929
border-radius: 8px;
3030
margin: 20px;
3131
width: 400px;
32+
padding: 12px;
33+
margin-top: 10px;
34+
overflow-y: auto;
3235
}
3336

3437
gmp-advanced-marker {
3538
display: none;
3639
}
40+
41+
.widget-container {
42+
height: 400px;
43+
width: 457px;
44+
overflow-y: auto;
45+
overflow-x: hidden;
46+
}
3747
/* [END maps_ui_kit_place_details] */

dist/samples/ui-kit-place-details/dist/assets/index-B8_Ypk3a.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

dist/samples/ui-kit-place-details/dist/assets/index-CadsbSRj.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;display:block}h1{font-size:16px;text-align:center}gmp-map{height:400px}gmp-place-details{background-color:#fff;border-radius:8px;margin:10px 20px 20px;width:400px;padding:12px;overflow-y:auto}gmp-advanced-marker{display:none}.widget-container{height:400px;width:457px;overflow-y:auto;overflow-x:hidden}

dist/samples/ui-kit-place-details/dist/assets/index-f2zskmln.css

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
<head>
1010
<title>Click on the map to view place details</title>
1111
<meta charset="utf-8">
12-
<script type="module" crossorigin src="./assets/index-B8_Ypk3a.js"></script>
13-
<link rel="stylesheet" crossorigin href="./assets/index-f2zskmln.css">
12+
<script type="module" crossorigin src="./assets/index-CadsbSRj.js"></script>
13+
<link rel="stylesheet" crossorigin href="./assets/index-DAWyXXsz.css">
1414
</head>
1515
<body>
1616
<!--[START maps_ui_kit_place_details_map] -->
17-
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
18-
<gmp-place-details
19-
size="x-large"
20-
slot="control-inline-start-block-start"></gmp-place-details>
17+
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
18+
<div class="widget-container" slot="control-inline-start-block-start">
19+
<gmp-place-details size="x-large"></gmp-place-details>
20+
</div>
2121
<gmp-advanced-marker></gmp-advanced-marker>
2222
</gmp-map>
2323
<!--[END maps_ui_kit_place_details_map] -->

dist/samples/ui-kit-place-details/docs/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
</head>
1515
<body>
1616
<!--[START maps_ui_kit_place_details_map] -->
17-
<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
18-
<gmp-place-details
19-
size="x-large"
20-
slot="control-inline-start-block-start"></gmp-place-details>
17+
<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
18+
<div class="widget-container" slot="control-inline-start-block-start">
19+
<gmp-place-details size="x-large"></gmp-place-details>
20+
</div>
2121
<gmp-advanced-marker></gmp-advanced-marker>
2222
</gmp-map>
2323
<!--[END maps_ui_kit_place_details_map] -->

dist/samples/ui-kit-place-details/docs/index.js

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,30 @@ const map = document.querySelector('gmp-map');
1010
const placeDetails = document.querySelector('gmp-place-details');
1111
const marker = document.querySelector('gmp-advanced-marker');
1212
/* [END maps_ui_kit_place_details_query_selector] */
13+
let center = { lat: 47.759737, lng: -122.250632 };
1314
async function initMap() {
1415
// Request needed libraries.
1516
const { Map } = await google.maps.importLibrary("maps");
16-
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
17+
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
1718
const { Place } = await google.maps.importLibrary("places");
18-
// Calls the geolocation helper function to center the map on the current
19-
// device location.
20-
findCurrentLocation();
2119
// Hide the map type control.
2220
map.innerMap.setOptions({ mapTypeControl: false });
21+
// Set the default selection.
22+
const place = new Place({
23+
id: "ChIJC8HakaIRkFQRiOgkgdHmqkk",
24+
requestedLanguage: "en", // optional
25+
});
26+
await placeDetails.configureFromPlace(place);
27+
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
28+
map.innerMap.panTo(adjustedCenter);
29+
map.innerMap.setZoom(16);
30+
marker.position = placeDetails.place.location;
31+
marker.style.display = 'block';
2332
/* [START maps_ui_kit_place_details_event] */
2433
// Add an event listener to handle map clicks.
2534
map.innerMap.addListener('click', async (event) => {
2635
marker.position = null;
2736
event.stop();
28-
placeDetails.style.visibility = 'visible';
2937
if (event.placeId) {
3038
// Fire when the user clicks a POI.
3139
await placeDetails.configureFromPlace({ id: event.placeId });
@@ -34,29 +42,18 @@ async function initMap() {
3442
// Fire when the user clicks the map (not on a POI).
3543
await placeDetails.configureFromLocation(event.latLng);
3644
}
45+
// Get the offset center.
46+
let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
3747
// Show the marker at the selected place.
3848
marker.position = placeDetails.place.location;
3949
marker.style.display = 'block';
50+
map.innerMap.panTo(adjustedCenter);
4051
});
4152
}
42-
/* [END maps_ui_kit_place_details_event] */
43-
// Helper function for geolocation.
44-
async function findCurrentLocation() {
45-
const { LatLng } = await google.maps.importLibrary('core');
46-
if (navigator.geolocation) {
47-
navigator.geolocation.getCurrentPosition((position) => {
48-
const pos = new LatLng(position.coords.latitude, position.coords.longitude);
49-
map.innerMap.panTo(pos);
50-
map.innerMap.setZoom(16);
51-
}, () => {
52-
console.log('The Geolocation service failed.');
53-
map.innerMap.setZoom(16);
54-
});
55-
}
56-
else {
57-
console.log('Your browser doesn\'t support geolocation');
58-
map.innerMap.setZoom(16);
59-
}
53+
// Helper function to offset the map center.
54+
function offsetLatLngRight(latLng, longitudeOffset) {
55+
const newLng = latLng.lng() + longitudeOffset;
56+
return new google.maps.LatLng(latLng.lat(), newLng);
6057
}
6158
window.initMap = initMap;
6259
export {};

0 commit comments

Comments
 (0)