diff --git a/samples/ui-kit-place-details/index.html b/samples/ui-kit-place-details/index.html index d3376e3a..42cf1160 100644 --- a/samples/ui-kit-place-details/index.html +++ b/samples/ui-kit-place-details/index.html @@ -7,70 +7,46 @@ - Click on the map to view place details + Place Details with Google Maps - - + + + + - - - - - -
- - - - +
+ + + + +
+ + + + + + + + + + + + + + + + + + +
- - + diff --git a/samples/ui-kit-place-details/index.ts b/samples/ui-kit-place-details/index.ts index 06e5d279..59198698 100644 --- a/samples/ui-kit-place-details/index.ts +++ b/samples/ui-kit-place-details/index.ts @@ -6,21 +6,23 @@ /* [START maps_ui_kit_place_details] */ // Use querySelector to select elements for interaction. /* [START maps_ui_kit_place_details_query_selector] */ -const map = document.querySelector('gmp-map') as any; +const map = document.querySelector('gmp-map') as google.maps.MapElement; const placeDetails = document.querySelector('gmp-place-details') as any; const placeDetailsRequest = document.querySelector( 'gmp-place-details-place-request' ) as any; -const marker = document.querySelector('gmp-advanced-marker') as any; +const marker = document.querySelector( + 'gmp-advanced-marker' +) as google.maps.marker.AdvancedMarkerElement; /* [END maps_ui_kit_place_details_query_selector] */ -let center = { lat: 47.759737, lng: -122.250632 }; - async function initMap(): Promise { // Request needed libraries. - (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; - (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary; - (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary; + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('places'), + ]); // Hide the map type control. map.innerMap.setOptions({ mapTypeControl: false }); @@ -28,11 +30,7 @@ async function initMap(): Promise { // Function to update map and marker based on place details const updateMapAndMarker = () => { if (placeDetails.place && placeDetails.place.location) { - let adjustedCenter = offsetLatLngRight( - placeDetails.place.location, - -0.005 - ); - map.innerMap.panTo(adjustedCenter); + map.innerMap.panTo(placeDetails.place.location); map.innerMap.setZoom(16); // Set zoom after panning if needed marker.position = placeDetails.place.location; marker.collisionBehavior = @@ -64,11 +62,5 @@ async function initMap(): Promise { } /* [END maps_ui_kit_place_details_event] */ -// Helper function to offset marker placement for better visual appearance. -function offsetLatLngRight(latLng, longitudeOffset) { - const newLng = latLng.lng() + longitudeOffset; - return new google.maps.LatLng(latLng.lat(), newLng); -} - initMap(); /* [END maps_ui_kit_place_details] */ diff --git a/samples/ui-kit-place-details/style.css b/samples/ui-kit-place-details/style.css index 37593743..00b52b86 100644 --- a/samples/ui-kit-place-details/style.css +++ b/samples/ui-kit-place-details/style.css @@ -9,36 +9,30 @@ */ html, body { - display: flex; /* Use flexbox for layout */ - justify-content: center; /* Center the content horizontally */ - align-items: flex-start; /* Align items to the top */ - width: 100%; + height: 100%; + margin: 0; + padding: 0; } -h1 { - font-size: 16px; - text-align: center; +.container { + display: flex; + height: 100vh; + width: 100%; } gmp-map { - height: 500px; + flex-grow: 1; } -gmp-place-details { - border-radius: 0px; - margin: 20px; +.ui-panel { width: 400px; - height: 500px; - margin-top: 0px; + margin-left: 20px; + margin-top: 10px; } -gmp-advanced-marker { - display: none; -} - -.widget-container { - min-width: 400px; - overflow-y: none; - overflow-x: none; +gmp-place-details { + width: 100%; + margin: 0; + border: none; } /* [END maps_ui_kit_place_details] */