diff --git a/dist/samples/advanced-markers-draggable/app/index.ts b/dist/samples/advanced-markers-draggable/app/index.ts index 284325ede..41f8a44e1 100644 --- a/dist/samples/advanced-markers-draggable/app/index.ts +++ b/dist/samples/advanced-markers-draggable/app/index.ts @@ -25,10 +25,12 @@ async function init() { mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] - draggableMarker.addListener('dragend', () => { - const position = draggableMarker.position!; + draggableMarker.addEventListener('gmp-dragend', () => { + const position = draggableMarker.position as google.maps.LatLngAltitude; infoWindow.close(); - infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`); + infoWindow.setContent( + `Pin dropped at: ${position.lat}, ${position.lng}` + ); infoWindow.open(draggableMarker.map, draggableMarker); }); } diff --git a/dist/samples/advanced-markers-draggable/dist/assets/index-JP_TK6Ka.js b/dist/samples/advanced-markers-draggable/dist/assets/index-JP_TK6Ka.js deleted file mode 100644 index 7554b73a6..000000000 --- a/dist/samples/advanced-markers-draggable/dist/assets/index-JP_TK6Ka.js +++ /dev/null @@ -1 +0,0 @@ -(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let 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;let n=t(e);fetch(e.href,n)}})();var e=document.querySelector(`gmp-map`);async function t(){let[{InfoWindow:t},{AdvancedMarkerElement:n}]=await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`marker`)]),r=new t,i=new n({position:{lat:37.39094933041195,lng:-122.02503913145092},gmpDraggable:!0,title:`This marker is draggable.`});e.append(i),i.addListener(`dragend`,()=>{let e=i.position;r.close(),r.setContent(`Pin dropped at: ${JSON.stringify(e)}`),r.open(i.map,i)})}t(); \ No newline at end of file diff --git a/dist/samples/advanced-markers-draggable/dist/index.html b/dist/samples/advanced-markers-draggable/dist/index.html index dbf9855f6..18567af06 100644 --- a/dist/samples/advanced-markers-draggable/dist/index.html +++ b/dist/samples/advanced-markers-draggable/dist/index.html @@ -12,10 +12,10 @@ - + diff --git a/dist/samples/advanced-markers-draggable/docs/index.js b/dist/samples/advanced-markers-draggable/docs/index.js index b7bfbb302..fcb22bc5f 100644 --- a/dist/samples/advanced-markers-draggable/docs/index.js +++ b/dist/samples/advanced-markers-draggable/docs/index.js @@ -26,10 +26,12 @@ async function init() { mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] - draggableMarker.addListener('dragend', () => { + draggableMarker.addEventListener('gmp-dragend', () => { const position = draggableMarker.position; infoWindow.close(); - infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`); + infoWindow.setContent( + `Pin dropped at: ${position.lat}, ${position.lng}` + ); infoWindow.open(draggableMarker.map, draggableMarker); }); } diff --git a/dist/samples/advanced-markers-draggable/docs/index.ts b/dist/samples/advanced-markers-draggable/docs/index.ts index 284325ede..41f8a44e1 100644 --- a/dist/samples/advanced-markers-draggable/docs/index.ts +++ b/dist/samples/advanced-markers-draggable/docs/index.ts @@ -25,10 +25,12 @@ async function init() { mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] - draggableMarker.addListener('dragend', () => { - const position = draggableMarker.position!; + draggableMarker.addEventListener('gmp-dragend', () => { + const position = draggableMarker.position as google.maps.LatLngAltitude; infoWindow.close(); - infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`); + infoWindow.setContent( + `Pin dropped at: ${position.lat}, ${position.lng}` + ); infoWindow.open(draggableMarker.map, draggableMarker); }); } diff --git a/dist/samples/advanced-markers-draggable/jsfiddle/demo.js b/dist/samples/advanced-markers-draggable/jsfiddle/demo.js index 4bd19f6f4..26696bc96 100644 --- a/dist/samples/advanced-markers-draggable/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-draggable/jsfiddle/demo.js @@ -23,10 +23,12 @@ async function init() { }); mapElement.append(draggableMarker); - draggableMarker.addListener('dragend', () => { + draggableMarker.addEventListener('gmp-dragend', () => { const position = draggableMarker.position; infoWindow.close(); - infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`); + infoWindow.setContent( + `Pin dropped at: ${position.lat}, ${position.lng}` + ); infoWindow.open(draggableMarker.map, draggableMarker); }); } diff --git a/dist/samples/advanced-markers-html/app/index.ts b/dist/samples/advanced-markers-html/app/index.ts index 91d55dbd0..11af34e3e 100644 --- a/dist/samples/advanced-markers-html/app/index.ts +++ b/dist/samples/advanced-markers-html/app/index.ts @@ -26,9 +26,10 @@ async function init() { content: buildContent(property), position: property.position, title: property.description, + gmpClickable: true, }); - advancedMarkerElement.addListener('click', () => { + advancedMarkerElement.addEventListener('gmp-click', () => { toggleHighlight(advancedMarkerElement); }); } @@ -72,17 +73,17 @@ function buildContent(property: Property) {
bedroom - ${property.bed} + ${String(property.bed)}
bathroom - ${property.bath} + ${String(property.bath)}
size - ${property.size} ft2 + ${String(property.size)} ft2
diff --git a/dist/samples/advanced-markers-html/dist/assets/index-DTiePOPF.js b/dist/samples/advanced-markers-html/dist/assets/index-DTiePOPF.js deleted file mode 100644 index 856819ebf..000000000 --- a/dist/samples/advanced-markers-html/dist/assets/index-DTiePOPF.js +++ /dev/null @@ -1,27 +0,0 @@ -(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let 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;let n=t(e);fetch(e.href,n)}})();async function e(){let[{Map:e},{AdvancedMarkerElement:i}]=await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`marker`)]),a=new e(document.getElementById(`map`),{zoom:11,center:{lat:37.43238031167444,lng:-122.16795397128632},mapId:`4504f8b37365c3d0`});for(let e of r){let r=new i({map:a,content:n(e),position:e.position,title:e.description});r.addListener(`click`,()=>{t(r)})}}function t(e){let t=e.children[0];t.classList.contains(`highlight`)?(t.classList.remove(`highlight`),e.zIndex=null):(t.classList.add(`highlight`),e.zIndex=1)}function n(e){let t=document.createElement(`div`);return t.classList.add(`property`),t.innerHTML=` -
- - ${e.type} -
-
-
${e.price}
-
${e.address}
-
-
- - bedroom - ${e.bed} -
-
- - bathroom - ${e.bath} -
-
- - size - ${e.size} ft2 -
-
-
- `,t}var r=[{address:`215 Emily St, MountainView, CA`,description:`Single family house with modern design`,price:`$ 3,889,000`,type:`home`,bed:5,bath:4.5,size:300,position:{lat:37.50024109655184,lng:-122.28528451834352}},{address:`108 Squirrel Ln 🐿, Menlo Park, CA`,description:`Townhouse with friendly neighbors`,price:`$ 3,050,000`,type:`building`,bed:4,bath:3,size:200,position:{lat:37.44440882321596,lng:-122.2160620727}},{address:`100 Chris St, Portola Valley, CA`,description:`Spacious warehouse great for small business`,price:`$ 3,125,000`,type:`warehouse`,bed:4,bath:4,size:800,position:{lat:37.39561833718522,lng:-122.21855116258479}},{address:`98 Aleh Ave, Palo Alto, CA`,description:`A lovely store on busy road`,price:`$ 4,225,000`,type:`store-alt`,bed:2,bath:1,size:210,position:{lat:37.423928529779644,lng:-122.1087629822001}},{address:`2117 Su St, MountainView, CA`,description:`Single family house near golf club`,price:`$ 1,700,000`,type:`home`,bed:4,bath:3,size:200,position:{lat:37.40578635332598,lng:-122.15043378466069}},{address:`197 Alicia Dr, Santa Clara, CA`,description:`Multifloor large warehouse`,price:`$ 5,000,000`,type:`warehouse`,bed:5,bath:4,size:700,position:{lat:37.36399747905774,lng:-122.10465384268522}},{address:`700 Jose Ave, Sunnyvale, CA`,description:`3 storey townhouse with 2 car garage`,price:`$ 3,850,000`,type:`building`,bed:4,bath:4,size:600,position:{lat:37.38343706184458,lng:-122.02340436985183}},{address:`868 Will Ct, Cupertino, CA`,description:`Single family house in great school zone`,price:`$ 2,500,000`,type:`home`,bed:3,bath:2,size:100,position:{lat:37.34576403052,lng:-122.04455090047453}},{address:`655 Haylee St, Santa Clara, CA`,description:`2 storey store with large storage room`,price:`$ 2,500,000`,type:`store-alt`,bed:3,bath:2,size:450,position:{lat:37.362863347890716,lng:-121.97802139023555}},{address:`2019 Natasha Dr, San Jose, CA`,description:`Single family house`,price:`$ 2,325,000`,type:`home`,bed:4,bath:3.5,size:500,position:{lat:37.41391636421949,lng:-121.94592071575907}}];e(); \ No newline at end of file diff --git a/dist/samples/advanced-markers-html/dist/index.html b/dist/samples/advanced-markers-html/dist/index.html index 42b760c38..148638112 100644 --- a/dist/samples/advanced-markers-html/dist/index.html +++ b/dist/samples/advanced-markers-html/dist/index.html @@ -14,10 +14,10 @@ - + diff --git a/dist/samples/advanced-markers-html/docs/index.js b/dist/samples/advanced-markers-html/docs/index.js index bed59eaf1..0ed43ef0a 100644 --- a/dist/samples/advanced-markers-html/docs/index.js +++ b/dist/samples/advanced-markers-html/docs/index.js @@ -27,9 +27,10 @@ async function init() { content: buildContent(property), position: property.position, title: property.description, + gmpClickable: true, }); - advancedMarkerElement.addListener('click', () => { + advancedMarkerElement.addEventListener('gmp-click', () => { toggleHighlight(advancedMarkerElement); }); } @@ -62,17 +63,17 @@ function buildContent(property) {
bedroom - ${property.bed} + ${String(property.bed)}
bathroom - ${property.bath} + ${String(property.bath)}
size - ${property.size} ft2 + ${String(property.size)} ft2
diff --git a/dist/samples/advanced-markers-html/docs/index.ts b/dist/samples/advanced-markers-html/docs/index.ts index 91d55dbd0..11af34e3e 100644 --- a/dist/samples/advanced-markers-html/docs/index.ts +++ b/dist/samples/advanced-markers-html/docs/index.ts @@ -26,9 +26,10 @@ async function init() { content: buildContent(property), position: property.position, title: property.description, + gmpClickable: true, }); - advancedMarkerElement.addListener('click', () => { + advancedMarkerElement.addEventListener('gmp-click', () => { toggleHighlight(advancedMarkerElement); }); } @@ -72,17 +73,17 @@ function buildContent(property: Property) {
bedroom - ${property.bed} + ${String(property.bed)}
bathroom - ${property.bath} + ${String(property.bath)}
size - ${property.size} ft2 + ${String(property.size)} ft2
diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.js b/dist/samples/advanced-markers-html/jsfiddle/demo.js index fbc3b59e4..0786bf6d8 100644 --- a/dist/samples/advanced-markers-html/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-html/jsfiddle/demo.js @@ -25,9 +25,10 @@ async function init() { content: buildContent(property), position: property.position, title: property.description, + gmpClickable: true, }); - advancedMarkerElement.addListener('click', () => { + advancedMarkerElement.addEventListener('gmp-click', () => { toggleHighlight(advancedMarkerElement); }); } @@ -60,17 +61,17 @@ function buildContent(property) {
bedroom - ${property.bed} + ${String(property.bed)}
bathroom - ${property.bath} + ${String(property.bath)}
size - ${property.size} ft2 + ${String(property.size)} ft2
diff --git a/samples/advanced-markers-draggable/index.ts b/samples/advanced-markers-draggable/index.ts index 284325ede..9c1ca1983 100644 --- a/samples/advanced-markers-draggable/index.ts +++ b/samples/advanced-markers-draggable/index.ts @@ -25,10 +25,12 @@ async function init() { mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] - draggableMarker.addListener('dragend', () => { - const position = draggableMarker.position!; + draggableMarker.addEventListener('gmp-dragend', () => { + const position = draggableMarker.position as google.maps.LatLngAltitude; infoWindow.close(); - infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`); + infoWindow.setContent( + `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}` + ); infoWindow.open(draggableMarker.map, draggableMarker); }); } diff --git a/samples/advanced-markers-html/index.ts b/samples/advanced-markers-html/index.ts index 91d55dbd0..11af34e3e 100644 --- a/samples/advanced-markers-html/index.ts +++ b/samples/advanced-markers-html/index.ts @@ -26,9 +26,10 @@ async function init() { content: buildContent(property), position: property.position, title: property.description, + gmpClickable: true, }); - advancedMarkerElement.addListener('click', () => { + advancedMarkerElement.addEventListener('gmp-click', () => { toggleHighlight(advancedMarkerElement); }); } @@ -72,17 +73,17 @@ function buildContent(property: Property) {
bedroom - ${property.bed} + ${String(property.bed)}
bathroom - ${property.bath} + ${String(property.bath)}
size - ${property.size} ft2 + ${String(property.size)} ft2
diff --git a/samples/ai-powered-summaries-basic/index.ts b/samples/ai-powered-summaries-basic/index.ts index 9dc0888bb..72550cbfc 100644 --- a/samples/ai-powered-summaries-basic/index.ts +++ b/samples/ai-powered-summaries-basic/index.ts @@ -84,7 +84,7 @@ async function getPlaceDetails() { innerMap.setCenter(place.location!); // Handle marker click. - marker.addListener('gmp-click', () => { + marker.addEventListener('gmp-click', () => { showInfoWindow(marker, place, content); }); diff --git a/samples/event-closure/index.ts b/samples/event-closure/index.ts index cdfc63c40..07376dc23 100644 --- a/samples/event-closure/index.ts +++ b/samples/event-closure/index.ts @@ -40,6 +40,7 @@ async function init() { lng: bounds.west + lngSpan * Math.random(), }, map: innerMap, + gmpClickable: true, }); void attachSecretMessage(marker, secretMessage); @@ -58,7 +59,7 @@ async function attachSecretMessage( content: secretMessage, }); - marker.addListener('gmp-click', () => { + marker.addEventListener('gmp-click', () => { infoWindow.open(marker.map, marker); }); } diff --git a/samples/place-nearby-search/index.ts b/samples/place-nearby-search/index.ts index 1c1283e8c..feaf93e90 100644 --- a/samples/place-nearby-search/index.ts +++ b/samples/place-nearby-search/index.ts @@ -92,6 +92,7 @@ async function nearbySearch() { map: innerMap, position: place.location, title: place.displayName, + gmpClickable: true, }); // Build the content of the InfoWindow safely using DOM elements. @@ -110,7 +111,7 @@ async function nearbySearch() { content.appendChild(link); } - marker.addListener('gmp-click', () => { + marker.addEventListener('gmp-click', () => { innerMap.panTo(place.location!); updateInfoWindow(place.displayName!, content, marker); }); diff --git a/samples/place-text-search/index.ts b/samples/place-text-search/index.ts index 416ca1188..bc6137992 100644 --- a/samples/place-text-search/index.ts +++ b/samples/place-text-search/index.ts @@ -55,7 +55,7 @@ async function findPlaces(query: string) { fields: ['displayName', 'location', 'businessStatus'], includedType: '', // Restrict query to a specific type (leave blank for any). useStrictTypeFiltering: true, - locationBias: map.getCenter(), + locationRestriction: map.getBounds(), isOpenNow: true, language: 'en-US', maxResultCount: 8, @@ -82,10 +82,11 @@ async function findPlaces(query: string) { map, position: place.location, title: place.displayName, + gmpClickable: true, }); markers[place.id] = marker; - marker.addListener('gmp-click', () => { + marker.addEventListener('gmp-click', () => { map.panTo(place.location!); updateInfoWindow(place.displayName!, place.id, marker); }); diff --git a/samples/polyline-utility/index.ts b/samples/polyline-utility/index.ts index be9fc94f6..3a67e1472 100644 --- a/samples/polyline-utility/index.ts +++ b/samples/polyline-utility/index.ts @@ -3,7 +3,7 @@ async function init(): Promise { const [ { Polyline }, { AdvancedMarkerElement }, - { LatLng, LatLngBounds, event }, + { LatLng, LatLngBounds }, { PlaceAutocompleteElement }, geometryLibrary, ] = await Promise.all([ @@ -112,9 +112,7 @@ async function init(): Promise { gmpDraggable: true, }); - marker.addListener('dragend', () => { - rebuildPathFromMarkers(); - }); + marker.addEventListener('gmp-dragend', rebuildPathFromMarkers); markers.push(marker); updateOutputs(); @@ -133,7 +131,10 @@ async function init(): Promise { function removePoint(index: number) { if (index >= 0 && index < markers.length) { - event.clearInstanceListeners(markers[index]); + markers[index].removeEventListener( + 'gmp-dragend', + rebuildPathFromMarkers + ); markers[index].map = null; markers.splice(index, 1); rebuildPathFromMarkers(); @@ -142,7 +143,7 @@ async function init(): Promise { function clearAll() { markers.forEach((m) => { - event.clearInstanceListeners(m); + m.removeEventListener('gmp-dragend', rebuildPathFromMarkers); m.map = null; }); markers = []; diff --git a/samples/ui-kit-advanced-place-search-nearby/index.ts b/samples/ui-kit-advanced-place-search-nearby/index.ts index 287295a08..0e6223db0 100644 --- a/samples/ui-kit-advanced-place-search-nearby/index.ts +++ b/samples/ui-kit-advanced-place-search-nearby/index.ts @@ -116,12 +116,13 @@ async function addMarkers() { map: map.innerMap, position: place.location, collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', + gmpClickable: true, }); markers.set(place.id, marker); bounds.extend(place.location); - marker.addListener('click', () => { + marker.addEventListener('gmp-click', () => { placeRequest.place = place; infoWindow.open(map.innerMap, marker); }); diff --git a/samples/ui-kit-advanced-place-search-text/index.ts b/samples/ui-kit-advanced-place-search-text/index.ts index 1d16690fc..67f8b2c16 100644 --- a/samples/ui-kit-advanced-place-search-text/index.ts +++ b/samples/ui-kit-advanced-place-search-text/index.ts @@ -123,12 +123,13 @@ async function addMarkers() { map: map.innerMap, position: place.location, collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', + gmpClickable: true, }); markers.set(place.id, marker); bounds.extend(place.location); - marker.addListener('click', () => { + marker.addEventListener('gmp-click', () => { placeRequest.place = place; infoWindow.open(map.innerMap, marker); }); diff --git a/samples/ui-kit-place-search-nearby/index.ts b/samples/ui-kit-place-search-nearby/index.ts index 61dc39066..246ce3b54 100644 --- a/samples/ui-kit-place-search-nearby/index.ts +++ b/samples/ui-kit-place-search-nearby/index.ts @@ -101,12 +101,13 @@ async function addMarkers() { map: map.innerMap, position: place.location, collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', + gmpClickable: true, }); markers.set(place.id, marker); bounds.extend(place.location); - marker.addListener('click', () => { + marker.addEventListener('gmp-click', () => { placeRequest.place = place; infoWindow.open(map.innerMap, marker); }); diff --git a/samples/ui-kit-place-search-text/index.ts b/samples/ui-kit-place-search-text/index.ts index 28325a12f..d3ca9b8da 100644 --- a/samples/ui-kit-place-search-text/index.ts +++ b/samples/ui-kit-place-search-text/index.ts @@ -111,12 +111,13 @@ async function addMarkers() { map: map.innerMap, position: place.location, collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL', + gmpClickable: true, }); markers.set(place.id, marker); bounds.extend(place.location); - marker.addListener('click', () => { + marker.addEventListener('gmp-click', () => { placeRequest.place = place; infoWindow.open(map.innerMap, marker); });