fix: Adds PinElement to fix breaking change. (#239)

Author: willum070

samples/advanced-markers-animation/index.html

@@ -19,7 +19,7 @@
 
     <!-- prettier-ignore -->
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
-        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
 </html>
 <!-- [END maps_advanced_markers_animation] -->

samples/advanced-markers-animation/index.ts

@@ -46,7 +46,7 @@
   async function initMap(): Promise<void> {
     // 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');