diff --git a/dist/samples/advanced-markers-animation/app/index.html b/dist/samples/advanced-markers-animation/app/index.html index 08bb0943..2e50280f 100644 --- a/dist/samples/advanced-markers-animation/app/index.html +++ b/dist/samples/advanced-markers-animation/app/index.html @@ -19,7 +19,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/dist/samples/advanced-markers-animation/app/index.ts b/dist/samples/advanced-markers-animation/app/index.ts index c11f3b56..beba63dd 100644 --- a/dist/samples/advanced-markers-animation/app/index.ts +++ b/dist/samples/advanced-markers-animation/app/index.ts @@ -46,7 +46,7 @@ async function initMap(): Promise { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const position = {lat: 37.4242011827985, lng: -122.09242296450893}; @@ -59,7 +59,7 @@ // Create 100 markers to animate. google.maps.event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { - createMarker(map, AdvancedMarkerElement); + createMarker(map, AdvancedMarkerElement, PinElement); } }); @@ -77,12 +77,15 @@ map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); } - function createMarker(map, AdvancedMarkerElement) { + function createMarker(map, AdvancedMarkerElement, PinElement) { + const pinElement = new PinElement(); + const content = pinElement.element; const advancedMarker = new AdvancedMarkerElement({ position: getRandomPosition(map), map: map, + content: content, }); - const content = advancedMarker.content as HTMLElement; + content.style.opacity = '0'; content.addEventListener('animationend', (event) => { content.classList.remove('drop'); diff --git a/dist/samples/advanced-markers-animation/dist/index.html b/dist/samples/advanced-markers-animation/dist/index.html index e21c9a4c..5e5f5b8b 100644 --- a/dist/samples/advanced-markers-animation/dist/index.html +++ b/dist/samples/advanced-markers-animation/dist/index.html @@ -9,7 +9,7 @@ Advanced Markers CSS Animation - + @@ -19,7 +19,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/dist/samples/advanced-markers-animation/docs/index.html b/dist/samples/advanced-markers-animation/docs/index.html index 08bb0943..2e50280f 100644 --- a/dist/samples/advanced-markers-animation/docs/index.html +++ b/dist/samples/advanced-markers-animation/docs/index.html @@ -19,7 +19,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/dist/samples/advanced-markers-animation/docs/index.js b/dist/samples/advanced-markers-animation/docs/index.js index 68842e45..18d86877 100644 --- a/dist/samples/advanced-markers-animation/docs/index.js +++ b/dist/samples/advanced-markers-animation/docs/index.js @@ -40,7 +40,7 @@ const intersectionObserver = new IntersectionObserver((entries) => { async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; const map = new Map(document.getElementById("map"), { zoom: 14, @@ -50,7 +50,7 @@ async function initMap() { // Create 100 markers to animate. google.maps.event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { - createMarker(map, AdvancedMarkerElement); + createMarker(map, AdvancedMarkerElement, PinElement); } }); // Add a button to reset the example. @@ -65,12 +65,14 @@ async function initMap() { controlDiv.appendChild(controlUI); map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); } -function createMarker(map, AdvancedMarkerElement) { +function createMarker(map, AdvancedMarkerElement, PinElement) { + const pinElement = new PinElement(); + const content = pinElement.element; const advancedMarker = new AdvancedMarkerElement({ position: getRandomPosition(map), map: map, + content: content, }); - const content = advancedMarker.content; content.style.opacity = '0'; content.addEventListener('animationend', (event) => { content.classList.remove('drop'); diff --git a/dist/samples/advanced-markers-animation/docs/index.ts b/dist/samples/advanced-markers-animation/docs/index.ts index c11f3b56..beba63dd 100644 --- a/dist/samples/advanced-markers-animation/docs/index.ts +++ b/dist/samples/advanced-markers-animation/docs/index.ts @@ -46,7 +46,7 @@ async function initMap(): Promise { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const position = {lat: 37.4242011827985, lng: -122.09242296450893}; @@ -59,7 +59,7 @@ // Create 100 markers to animate. google.maps.event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { - createMarker(map, AdvancedMarkerElement); + createMarker(map, AdvancedMarkerElement, PinElement); } }); @@ -77,12 +77,15 @@ map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); } - function createMarker(map, AdvancedMarkerElement) { + function createMarker(map, AdvancedMarkerElement, PinElement) { + const pinElement = new PinElement(); + const content = pinElement.element; const advancedMarker = new AdvancedMarkerElement({ position: getRandomPosition(map), map: map, + content: content, }); - const content = advancedMarker.content as HTMLElement; + content.style.opacity = '0'; content.addEventListener('animationend', (event) => { content.classList.remove('drop'); diff --git a/dist/samples/advanced-markers-animation/jsfiddle/index.html b/dist/samples/advanced-markers-animation/jsfiddle/index.html index 8db64a02..fd06e8d7 100644 --- a/dist/samples/advanced-markers-animation/jsfiddle/index.html +++ b/dist/samples/advanced-markers-animation/jsfiddle/index.html @@ -19,7 +19,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); diff --git a/dist/samples/advanced-markers-animation/jsfiddle/index.js b/dist/samples/advanced-markers-animation/jsfiddle/index.js index 0a427f52..9f59284c 100644 --- a/dist/samples/advanced-markers-animation/jsfiddle/index.js +++ b/dist/samples/advanced-markers-animation/jsfiddle/index.js @@ -40,7 +40,7 @@ const intersectionObserver = new IntersectionObserver((entries) => { async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; const map = new Map(document.getElementById("map"), { zoom: 14, @@ -50,7 +50,7 @@ async function initMap() { // Create 100 markers to animate. google.maps.event.addListenerOnce(map, 'idle', () => { for (let i = 0; i < 100; i++) { - createMarker(map, AdvancedMarkerElement); + createMarker(map, AdvancedMarkerElement, PinElement); } }); // Add a button to reset the example. @@ -65,12 +65,14 @@ async function initMap() { controlDiv.appendChild(controlUI); map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv); } -function createMarker(map, AdvancedMarkerElement) { +function createMarker(map, AdvancedMarkerElement, PinElement) { + const pinElement = new PinElement(); + const content = pinElement.element; const advancedMarker = new AdvancedMarkerElement({ position: getRandomPosition(map), map: map, + content: content, }); - const content = advancedMarker.content; content.style.opacity = '0'; content.addEventListener('animationend', (event) => { content.classList.remove('drop');