googlemaps-samples · willum070 · Oct 9, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/samples/advanced-markers-basic-style/index.html b/samples/advanced-markers-basic-style/index.html
@@ -11,13 +11,12 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div id="map"></div>
-
     <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
+  </head>
+  <body>
+    <gmp-map center="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
   </body>
 </html>
 <!-- [END maps_advanced_markers_basic_style] -->
diff --git a/samples/advanced-markers-basic-style/index.ts b/samples/advanced-markers-basic-style/index.ts
@@ -6,24 +6,22 @@
 
 // [START maps_advanced_markers_basic_style]
 const parser = new DOMParser();
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+let innerMap;
 
 async function initMap() {
     // Request needed libraries.
     const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
     const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
 
-    const map = new Map(document.getElementById('map') as HTMLElement, {
-        center: { lat: 37.419, lng: -122.02 },
-        zoom: 14,
-        mapId: '4504f8b37365c3d0',
-    });
+    innerMap = mapElement.innerMap;
 
     // Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
 
     // [START maps_advanced_markers_basic_style_title]
     // Default marker with title text (no PinElement).
     const markerViewWithText = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.419, lng: -122.03 },
         title: 'Title text for the marker at lat: 37.419, lng: -122.03',
     });
@@ -35,7 +33,7 @@ async function initMap() {
         scale: 1.5,
     });
     const markerViewScaled = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.419, lng: -122.02 },
         content: pinScaled.element,
     });
@@ -47,7 +45,7 @@ async function initMap() {
         background: '#FBBC04',
     });
     const markerViewBackground = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.419, lng: -122.01 },
         content: pinBackground.element,
     });
@@ -59,7 +57,7 @@ async function initMap() {
         borderColor: '#137333',
     });
     const markerViewBorder = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.415, lng: -122.035 },
         content: pinBorder.element,
     });
@@ -71,7 +69,7 @@ async function initMap() {
         glyphColor: 'white',
     });
     const markerViewGlyph = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.415, lng: -122.025 },
         content: pinGlyph.element,
     });
@@ -83,7 +81,7 @@ async function initMap() {
         glyphColor: 'white',
     });
     const markerViewGlyphText = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.415, lng: -122.015 },
         content: pinTextGlyph.element,
     });
@@ -95,7 +93,7 @@ async function initMap() {
         glyph: '',
     });
     const markerViewNoGlyph = new AdvancedMarkerElement({
-        map,
+        map: innerMap,
         position: { lat: 37.415, lng: -122.005 },
         content: pinNoGlyph.element,
     });
@@ -104,4 +102,4 @@ async function initMap() {
 }
 
 initMap();
-// [END maps_advanced_markers_basic_style]
+// [END maps_advanced_markers_basic_style]
diff --git a/samples/advanced-markers-basic-style/style.css b/samples/advanced-markers-basic-style/style.css
@@ -8,7 +8,7 @@
  * Always set the map height explicitly to define the size of the div element
  * that contains the map. 
  */
-#map {
+gmp-map {
   height: 100%;
 }
 

diff --git a/samples/advanced-markers-collision/index.html b/samples/advanced-markers-collision/index.html
@@ -21,10 +21,13 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
+    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </head>
   <body>
     <div id="container">
-      <div id="map"></div>
+      <gmp-map center="47.609414458375674,-122.33897030353548" zoom="17" map-id="6ff586e93e18149f"></gmp-map>
       <div id="sidebar">
         <div class="mdc-select mdc-select--outlined">
           <div
@@ -69,12 +72,9 @@
             </ul>
           </div>
         </div>
+        </div>
       </div>
     </div>
-
-    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
   </body>
 </html>
 <!-- [END maps_advanced_markers_collision] -->
diff --git a/samples/advanced-markers-collision/index.ts b/samples/advanced-markers-collision/index.ts
@@ -6,33 +6,30 @@
 
 // eslint-disable no-undef
 // [START maps_advanced_markers_collision]
-let map: google.maps.Map;
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+let innerMap;
 
 // Initialize and add the map
 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 { Map } = (await google.maps.importLibrary(
+    "maps"
+  )) as google.maps.MapsLibrary;
+  const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+    "marker"
+  )) as google.maps.MarkerLibrary;
+
   let markers: google.maps.marker.AdvancedMarkerElement[] = [];
 
   let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
 
-  map = new Map(
-    document.getElementById("map") as HTMLElement,
-    {
-      mapId: "6ff586e93e18149f",
-      center: { lat: 47.609414458375674, lng: -122.33897030353548 },
-      zoom: 17,
-    } as google.maps.MapOptions
-  );
+  innerMap = mapElement.innerMap;
 
   // @ts-ignore
   const select = new mdc.select.MDCSelect(
     document.querySelector(".mdc-select") as HTMLElement
   );
 
-
   select.listen("MDCSelect:change", () => {
     collisionBehavior = select.value;
     markers.forEach((marker) => {
@@ -63,7 +60,7 @@ async function initMap(): Promise<void> {
     // [START maps_advanced_markers_collision_create_marker]
     const advancedMarker = new AdvancedMarkerElement({
       position: new google.maps.LatLng({ lat, lng }),
-      map,
+      map: innerMap,
       collisionBehavior: collisionBehavior,
     });
     // [END maps_advanced_markers_collision_create_marker]
@@ -72,4 +69,4 @@ async function initMap(): Promise<void> {
 }
 
 initMap();
-// [END maps_advanced_markers_collision]
+// [END maps_advanced_markers_collision]
diff --git a/samples/advanced-markers-collision/style.css b/samples/advanced-markers-collision/style.css
@@ -40,13 +40,13 @@ body {
   flex-basis: 15rem;
   flex-grow: 1;
   padding: 1rem;
-  max-width: 30rem;
+  max-width: 33rem;
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
 }
 
-#map {
+gmp-map {
   flex-basis: 0;
   flex-grow: 4;
   height: 100%;

diff --git a/samples/advanced-markers-draggable/index.html b/samples/advanced-markers-draggable/index.html
@@ -11,13 +11,12 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div id="map"></div>
-
     <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
+  </head>
+  <body>
+    <gmp-map center="37.39094933041195,-122.02503913145092" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
   </body>
 </html>
 <!-- [END maps_advanced_markers_draggable] -->
diff --git a/samples/advanced-markers-draggable/index.ts b/samples/advanced-markers-draggable/index.ts
@@ -5,35 +5,31 @@
  */
 
 // [START maps_advanced_markers_draggable]
+const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
+
  async function initMap() {
     // Request needed libraries.
     const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
-
-    const map = new Map(document.getElementById('map') as HTMLElement, {
-        center: {lat: 37.39094933041195, lng: -122.02503913145092},
-        zoom: 14,
-        mapId: '4504f8b37365c3d0',
-    });
 
     const infoWindow = new InfoWindow();
 
     // [START maps_advanced_markers_draggable_marker]
     const draggableMarker = new AdvancedMarkerElement({
-        map,
         position: {lat: 37.39094933041195, lng: -122.02503913145092},
         gmpDraggable: true,
         title: "This marker is draggable.",
     });
+    mapElement.append(draggableMarker);
     // [END maps_advanced_markers_draggable_marker]
+
     draggableMarker.addListener('dragend', (event) => {
         const position = draggableMarker.position as google.maps.LatLng;
         infoWindow.close();
         infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
         infoWindow.open(draggableMarker.map, draggableMarker);
     });
-
 }
 
 initMap();
-// [END maps_advanced_markers_draggable]
+// [END maps_advanced_markers_draggable]
diff --git a/samples/advanced-markers-draggable/style.css b/samples/advanced-markers-draggable/style.css
@@ -8,7 +8,7 @@
  * Always set the map height explicitly to define the size of the div element
  * that contains the map. 
  */
-#map {
+gmp-map {
   height: 100%;
 }
 

diff --git a/samples/advanced-markers-html-simple/index.html b/samples/advanced-markers-html-simple/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2019 Google LLC. All Rights Reserved.
@@ -11,13 +11,16 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    <div id="map"></div>
-
     <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
+  </head>
+  <body>
+    <gmp-map
+      center="37.42,-122.1"
+      zoom="14"
+      map-id="4504f8b37365c3d0"
+    ></gmp-map>
   </body>
 </html>
 <!-- [END maps_advanced_markers_html_simple] -->
diff --git a/samples/advanced-markers-html-simple/index.ts b/samples/advanced-markers-html-simple/index.ts
@@ -6,26 +6,26 @@
 
 // [START maps_advanced_markers_html_simple]
 // [START maps_advanced_markers_html_simple_snippet]
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+
 async function initMap() {
   // 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 map = new Map(document.getElementById('map') as HTMLElement, {
-    center: { lat: 37.42, lng: -122.1 },
-    zoom: 14,
-    mapId: '4504f8b37365c3d0',
-  });
+  const { Map } = (await google.maps.importLibrary(
+    "maps"
+  )) as google.maps.MapsLibrary;
+  const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+    "marker"
+  )) as google.maps.MarkerLibrary;
 
-  const priceTag = document.createElement('div');
-  priceTag.className = 'price-tag';
-  priceTag.textContent = '$2.5M';
+  const priceTag = document.createElement("div");
+  priceTag.className = "price-tag";
+  priceTag.textContent = "$2.5M";
 
   const marker = new AdvancedMarkerElement({
-    map,
     position: { lat: 37.42, lng: -122.1 },
     content: priceTag,
   });
+  mapElement.append(marker);
 }
 // [END maps_advanced_markers_html_simple_snippet]
 initMap();

diff --git a/samples/advanced-markers-html-simple/style.css b/samples/advanced-markers-html-simple/style.css
@@ -8,7 +8,7 @@
  * Always set the map height explicitly to define the size of the div element
  * that contains the map. 
  */
-#map {
+gmp-map {
   height: 100%;
 }
 
@@ -24,9 +24,9 @@ body {
 
 /* HTML marker styles */
 .price-tag {
-  background-color: #4285F4;
+  background-color: #4285f4;
   border-radius: 8px;
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 14px;
   padding: 10px 15px;
   position: relative;
@@ -43,7 +43,7 @@ body {
   height: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
-  border-top: 8px solid #4285F4;
+  border-top: 8px solid #4285f4;
 }
 
-/* [END maps_advanced_markers_html_simple] */
+/* [END maps_advanced_markers_html_simple] */