diff --git a/dist/samples/place-autocomplete-basic-map/app/index.html b/dist/samples/place-autocomplete-basic-map/app/index.html index bda823fc..4c4ae61d 100644 --- a/dist/samples/place-autocomplete-basic-map/app/index.html +++ b/dist/samples/place-autocomplete-basic-map/app/index.html @@ -1,4 +1,4 @@ - + + -
- + + + - + + - - - diff --git a/dist/samples/place-autocomplete-basic-map/app/index.ts b/dist/samples/place-autocomplete-basic-map/app/index.ts index 35568701..3a532519 100644 --- a/dist/samples/place-autocomplete-basic-map/app/index.ts +++ b/dist/samples/place-autocomplete-basic-map/app/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,14 +96,14 @@ 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: { lat: newCenter.lat(), lng: newCenter.lng(), }, - radius: 10000, // 10km in meters + radius: 10000, // 10km in meters. }); }); } diff --git a/dist/samples/place-autocomplete-basic-map/app/style.css b/dist/samples/place-autocomplete-basic-map/app/style.css index 7c9c7db9..887495f0 100644 --- a/dist/samples/place-autocomplete-basic-map/app/style.css +++ b/dist/samples/place-autocomplete-basic-map/app/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] */ diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css deleted file mode 100644 index 2f851235..00000000 --- a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */html,body{height:100%;margin:0;padding:0}#map-container{height:100%}gmp-basic-place-autocomplete{position:absolute;height:50px;width:500px;top:10px;left:10px;z-index:1;box-shadow:2px 2px 5px 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:#fff;color-scheme:light} diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js deleted file mode 100644 index 5b448d41..00000000 --- a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function c(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=c(e);fetch(e.href,t)}})();/* -* @license -* Copyright 2025 Google LLC. All Rights Reserved. -* SPDX-License-Identifier: Apache-2.0 -*/const l=document.querySelector("gmp-basic-place-autocomplete"),r=document.querySelector("gmp-place-details-compact"),d=r.parentElement,m=document.getElementById("map-container"),i={lat:40.749933,lng:-73.98633};async function u(){await google.maps.importLibrary("places");const{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),{Map:a,InfoWindow:c}=await google.maps.importLibrary("maps");l.locationBias=i;const n=new a(m,{zoom:12,center:i,mapId:"DEMO_MAP_ID",clickableIcons:!1,mapTypeControl:!1,streetViewControl:!1}),e=new s({map:n}),t=new c({minWidth:360,disableAutoPan:!0,closeButton:!1,headerDisabled:!0,pixelOffset:new google.maps.Size(0,-10)});l.addEventListener("gmp-select",o=>{d.appendChild(r),e.position=null,t.close();const p=r.querySelector("gmp-place-details-place-request");p.place=o.place.id}),r.addEventListener("gmp-load",()=>{const o=r.place.location;e.position=o,t.setContent(r),t.open({map:n,anchor:e}),n.setCenter(o),r.focus()}),n.addListener("click",()=>{t.close(),e.position=null}),n.addListener("idle",()=>{const o=n.getCenter();l.locationBias=new google.maps.Circle({center:{lat:o.lat(),lng:o.lng()},radius:1e4})})}u(); diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-DLx0Rasp.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-DLx0Rasp.js new file mode 100644 index 00000000..a2e49251 --- /dev/null +++ b/dist/samples/place-autocomplete-basic-map/dist/assets/index-DLx0Rasp.js @@ -0,0 +1,5 @@ +(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function l(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=l(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const a=document.querySelector("gmp-basic-place-autocomplete"),r=document.querySelector("gmp-place-details-compact"),d=r.parentElement,c=document.querySelector("gmp-map");async function m(){await google.maps.importLibrary("places");const{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),{InfoWindow:i}=await google.maps.importLibrary("maps"),l=c.center;a.locationBias=l;const n=c.innerMap;n.setOptions({clickableIcons:!1,mapTypeControl:!1,streetViewControl:!1});const e=new s({map:n,collisionBehavior:google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL}),t=new i({minWidth:360,disableAutoPan:!0,headerDisabled:!0,pixelOffset:new google.maps.Size(0,-10)});a.addEventListener("gmp-select",o=>{d.appendChild(r),r.style.display="block",e.position=null,t.close();const p=r.querySelector("gmp-place-details-place-request");p.place=o.place.id}),r.addEventListener("gmp-load",()=>{const o=r.place.location;e.position=o,t.setContent(r),t.open({map:n,anchor:e}),n.setCenter(o)}),n.addListener("click",()=>{t.close(),e.position=null}),n.addListener("idle",()=>{const o=n.getCenter();a.locationBias=new google.maps.Circle({center:{lat:o.lat(),lng:o.lng()},radius:1e4})})}m(); diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-NYR7D18x.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-NYR7D18x.css new file mode 100644 index 00000000..dae7a89e --- /dev/null +++ b/dist/samples/place-autocomplete-basic-map/dist/assets/index-NYR7D18x.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */html,body{height:100%;margin:0;padding:0}gmp-map{height:100%}gmp-basic-place-autocomplete{position:absolute;height:30px;width:500px;top:10px;left:10px;box-shadow:4px 4px 5px #0003;color-scheme:light;border-radius:10px} diff --git a/dist/samples/place-autocomplete-basic-map/dist/index.html b/dist/samples/place-autocomplete-basic-map/dist/index.html index 9c321738..eaf94547 100644 --- a/dist/samples/place-autocomplete-basic-map/dist/index.html +++ b/dist/samples/place-autocomplete-basic-map/dist/index.html @@ -1,4 +1,4 @@ - + + + + -
- + + + - + + - - - diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.html b/dist/samples/place-autocomplete-basic-map/docs/index.html index bda823fc..4c4ae61d 100644 --- a/dist/samples/place-autocomplete-basic-map/docs/index.html +++ b/dist/samples/place-autocomplete-basic-map/docs/index.html @@ -1,4 +1,4 @@ - + + -
- + + + - + + - - - diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.js b/dist/samples/place-autocomplete-basic-map/docs/index.js index 19eeaab4..d6f2ef59 100644 --- a/dist/samples/place-autocomplete-basic-map/docs/index.js +++ b/dist/samples/place-autocomplete-basic-map/docs/index.js @@ -1,27 +1,26 @@ "use strict"; /* -* @license -* Copyright 2025 Google LLC. All Rights Reserved. -* SPDX-License-Identifier: Apache-2.0 -*/ + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ // [START maps_place_autocomplete_basic_map] const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete'); const placeDetailsElement = document.querySelector('gmp-place-details-compact'); const placeDetailsParent = placeDetailsElement.parentElement; -const mapDiv = document.getElementById('map-container'); -const center = { lat: 40.749933, lng: -73.98633 }; // New York City +const gmpMapElement = document.querySelector('gmp-map'); async function initMap() { // Asynchronously load required libraries from the Google Maps JS API. await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); + const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); + const { InfoWindow } = (await google.maps.importLibrary('maps')); + // 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 = 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, @@ -29,12 +28,12 @@ async function initMap() { // Create an advanced marker to show the location of a selected place. const advancedMarkerElement = new AdvancedMarkerElement({ map: map, + collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, }); // Create an InfoWindow to hold the place details component. const infoWindow = new InfoWindow({ minWidth: 360, disableAutoPan: true, - closeButton: false, headerDisabled: true, pixelOffset: new google.maps.Size(0, -10), }); @@ -43,6 +42,7 @@ async function initMap() { placeAutocompleteElement.addEventListener('gmp-select', (event) => { // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent.appendChild(placeDetailsElement); + placeDetailsElement.style.display = 'block'; advancedMarkerElement.position = null; infoWindow.close(); // Request details for the selected place. @@ -61,7 +61,6 @@ async function initMap() { anchor: advancedMarkerElement, }); map.setCenter(location); - placeDetailsElement.focus(); }); // Event listener to close the InfoWindow when the map is clicked. map.addListener('click', () => { @@ -77,7 +76,7 @@ async function initMap() { lat: newCenter.lat(), lng: newCenter.lng(), }, - radius: 10000, // 10km in meters + radius: 10000, // 10km in meters. }); }); } diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.ts b/dist/samples/place-autocomplete-basic-map/docs/index.ts index 35568701..3a532519 100644 --- a/dist/samples/place-autocomplete-basic-map/docs/index.ts +++ b/dist/samples/place-autocomplete-basic-map/docs/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,14 +96,14 @@ 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: { lat: newCenter.lat(), lng: newCenter.lng(), }, - radius: 10000, // 10km in meters + radius: 10000, // 10km in meters. }); }); } diff --git a/dist/samples/place-autocomplete-basic-map/docs/style.css b/dist/samples/place-autocomplete-basic-map/docs/style.css index 7c9c7db9..887495f0 100644 --- a/dist/samples/place-autocomplete-basic-map/docs/style.css +++ b/dist/samples/place-autocomplete-basic-map/docs/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] */ diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css index 4c16caf6..f1b164e4 100644 --- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css +++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ - + 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; -} - - - diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html index c6e64e2e..1fb5cee6 100644 --- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html +++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html @@ -1,4 +1,4 @@ - + + -
- + + + - + + - - - diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js index 16b5aa11..5b9e3f9b 100644 --- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js +++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js @@ -1,27 +1,26 @@ "use strict"; /* -* @license -* Copyright 2025 Google LLC. All Rights Reserved. -* SPDX-License-Identifier: Apache-2.0 -*/ + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete'); const placeDetailsElement = document.querySelector('gmp-place-details-compact'); const placeDetailsParent = placeDetailsElement.parentElement; -const mapDiv = document.getElementById('map-container'); -const center = { lat: 40.749933, lng: -73.98633 }; // New York City +const gmpMapElement = document.querySelector('gmp-map'); async function initMap() { // Asynchronously load required libraries from the Google Maps JS API. await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); + const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); + const { InfoWindow } = (await google.maps.importLibrary('maps')); + // 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 = 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, @@ -29,12 +28,12 @@ async function initMap() { // Create an advanced marker to show the location of a selected place. const advancedMarkerElement = new AdvancedMarkerElement({ map: map, + collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, }); // Create an InfoWindow to hold the place details component. const infoWindow = new InfoWindow({ minWidth: 360, disableAutoPan: true, - closeButton: false, headerDisabled: true, pixelOffset: new google.maps.Size(0, -10), }); @@ -43,6 +42,7 @@ async function initMap() { placeAutocompleteElement.addEventListener('gmp-select', (event) => { // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent.appendChild(placeDetailsElement); + placeDetailsElement.style.display = 'block'; advancedMarkerElement.position = null; infoWindow.close(); // Request details for the selected place. @@ -61,7 +61,6 @@ async function initMap() { anchor: advancedMarkerElement, }); map.setCenter(location); - placeDetailsElement.focus(); }); // Event listener to close the InfoWindow when the map is clicked. map.addListener('click', () => { @@ -77,7 +76,7 @@ async function initMap() { lat: newCenter.lat(), lng: newCenter.lng(), }, - radius: 10000, // 10km in meters + radius: 10000, // 10km in meters. }); }); }