diff --git a/samples/place-autocomplete-basic-map/index.html b/samples/place-autocomplete-basic-map/index.html index bda823fc..4c4ae61d 100644 --- a/samples/place-autocomplete-basic-map/index.html +++ b/samples/place-autocomplete-basic-map/index.html @@ -1,4 +1,4 @@ - + + -
- + + + - + + - - - diff --git a/samples/place-autocomplete-basic-map/index.ts b/samples/place-autocomplete-basic-map/index.ts index 35568701..7cbab353 100644 --- a/samples/place-autocomplete-basic-map/index.ts +++ b/samples/place-autocomplete-basic-map/index.ts @@ -1,4 +1,4 @@ - /* +/* * @license * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 @@ -7,55 +7,61 @@ const placeAutocompleteElement = document.querySelector( 'gmp-basic-place-autocomplete', -) as any; +) as google.maps.places.PlaceAutocompleteElement; const placeDetailsElement = document.querySelector( 'gmp-place-details-compact', ) as any; const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement; -const mapDiv = document.getElementById('map-container') as HTMLElement; -const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City - +const gmpMapElement = document.querySelector( + 'gmp-map', +) as google.maps.MapElement; async function initMap(): Promise { // Asynchronously load required libraries from the Google Maps JS API. await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker; - const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any; + const {AdvancedMarkerElement} = (await google.maps.importLibrary( + 'marker', + )) as google.maps.MarkerLibrary; + const {InfoWindow} = (await google.maps.importLibrary( + 'maps', + )) as google.maps.MapsLibrary; + + // Get the initial center directly from the gmp-map element's property. + const center = gmpMapElement.center; // Set the initial location bias for the autocomplete element. placeAutocompleteElement.locationBias = center; - // Create the map object with specified options. - const map: google.maps.Map = new Map(mapDiv, { - zoom: 12, - center: center, - mapId: 'DEMO_MAP_ID', + // Update the map object with specified options. + const map = gmpMapElement.innerMap; + map.setOptions({ clickableIcons: false, mapTypeControl: false, streetViewControl: false, }); // Create an advanced marker to show the location of a selected place. - const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({ - map: map, - }); + const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = + new AdvancedMarkerElement({ + map: map, + collisionBehavior: + google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, + }); // Create an InfoWindow to hold the place details component. const infoWindow: google.maps.InfoWindow = new InfoWindow({ minWidth: 360, disableAutoPan: true, - closeButton: false, headerDisabled: true, pixelOffset: new google.maps.Size(0, -10), }); - // [START maps_place_autocomplete_basic_map_listener] // Event listener for when a place is selected from the autocomplete list. placeAutocompleteElement.addEventListener('gmp-select', (event: any) => { - // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent.appendChild(placeDetailsElement); + placeDetailsElement.style.display = 'block'; advancedMarkerElement.position = null; infoWindow.close(); @@ -70,7 +76,7 @@ async function initMap(): Promise { // Event listener for when the place details have finished loading. placeDetailsElement.addEventListener('gmp-load', () => { const location = placeDetailsElement.place.location as google.maps.LatLng; - + // Position the marker and open the InfoWindow at the place's location. advancedMarkerElement.position = location; infoWindow.setContent(placeDetailsElement); @@ -79,7 +85,6 @@ async function initMap(): Promise { anchor: advancedMarkerElement, }); map.setCenter(location); - placeDetailsElement.focus(); }); // Event listener to close the InfoWindow when the map is clicked. @@ -91,7 +96,7 @@ async function initMap(): Promise { // Event listener for when the map finishes moving (panning or zooming). map.addListener('idle', (): void => { const newCenter = map.getCenter() as google.maps.LatLng; - + // Update the autocomplete's location bias to a 10km radius around the new map center. placeAutocompleteElement.locationBias = new google.maps.Circle({ center: { diff --git a/samples/place-autocomplete-basic-map/style.css b/samples/place-autocomplete-basic-map/style.css index 7c9c7db9..887495f0 100644 --- a/samples/place-autocomplete-basic-map/style.css +++ b/samples/place-autocomplete-basic-map/style.css @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ - /* [START maps_place_autocomplete_basic_map] */ +/* [START maps_place_autocomplete_basic_map] */ html, body { height: 100%; @@ -11,30 +11,18 @@ body { padding: 0; } -#map-container { +gmp-map { height: 100%; } gmp-basic-place-autocomplete { position: absolute; - height: 50px; + height: 30px; width: 500px; top: 10px; left: 10px; - z-index: 1; - box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2); + box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2); color-scheme: light; border-radius: 10px; } - -gmp-place-details-compact { - width: 360px; - min-width: 300px; - max-height: 300px; - border: none; - background-color: #ffffff; - color-scheme: light; -} - - /* [END maps_place_autocomplete_basic_map] */