Skip to content

Commit 7689941

Browse files
willum070willum070
authored
fix: Adjusts the UI so the map is 400px deep; remove geolocation; UI tweaks for appearance. (#287)
1 parent 4255391 commit 7689941

File tree

3 files changed

+44
-36
lines changed

3 files changed

+44
-36
lines changed

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

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

‎samples/ui-kit-place-details/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] */

0 commit comments

Comments
 (0)