googlemaps-samples · willum070 · Oct 10, 2025 · Oct 10, 2025
diff --git a/dist/samples/test-example/app/index.html b/dist/samples/test-example/app/index.html
@@ -11,17 +11,23 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
+
+    <!-- Add the inline bootstrap loader to the document head. -->
+    <!-- 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>
     <!--[START maps_test_example_heading]-->
     <h3>Maps Test Example</h3>
     <!--[END maps_test_example_heading]-->
     <!--[START maps_test_example_body]-->
-    <div id="map"></div>
+    <!-- Add a gmp-map element to display the map. -->
+    <gmp-map center="-25.344, 131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!-- Nest markers and UI controls inside the gmp-map element. -->
+      <gmp-advanced-marker></gmp-advanced-marker>
+    </gmp-map>
     <!--[END maps_test_example_body]-->
-    <!-- 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_test_example]-->
diff --git a/dist/samples/test-example/app/index.ts b/dist/samples/test-example/app/index.ts
@@ -3,33 +3,46 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+/*
+ * This is a special sample! Having a dedicated test sample makes it easier to
+ * test changes in a world where sometimes changes must be merged in order to
+ * test them. This way we can avoid making changes to published content.
+ */
+
 // TEST COMMENT 007
 // [START maps_test_example]
-// Initialize and add the map.
-let map;
+// Declare the gmp-map element.
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+let innerMap;
+const advancedMarkerElement = document.querySelector(
+  "gmp-advanced-marker"
+) as google.maps.marker.AdvancedMarkerElement;
+let center;
+
 async function initMap(): Promise<void> {
   // [START maps_test_example_instantiate_map]
-  // The location of Uluru.
-  const position = {lat: -25.344, lng: 131.031};
-
   //  Request the 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;
 
-  // The map, centered at Uluru.
-  map = new Map(document.getElementById('map') as HTMLElement, {
-    zoom: 4,
-    center: position,
-    mapId: 'DEMO_MAP_ID',
+  // Get the inner map from the gmp-map element.
+  innerMap = mapElement.innerMap;
+  innerMap.setOptions({
+    mapTypeControl: false,
   });
   // [END maps_test_example_instantiate_map]
 
+  // Get the lat/lng from the inner map.
+  center = innerMap.getCenter();
+
   // [START maps_test_example_instantiate_marker]
-  // The marker, positioned at Uluru.
-  const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
-  // [END maps_test_example_instantiate_marker]  
+  // Add a marker, positioned at Uluru.
+  const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" });
+  // [END maps_test_example_instantiate_marker]
 }
 initMap();
 // [END maps_test_example]
diff --git a/dist/samples/test-example/app/style.css b/dist/samples/test-example/app/style.css
@@ -4,22 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* [START maps_test_example] */
- /*
+/*
  * Always set the map height explicitly to define the size of the div element
  * that contains the map.
  */
- #map {
-    height: 100%;
-  }
-  
-  /*
+gmp-map {
+  height: 100%;
+}
+
+/*
    * Optional: Makes the sample page fill the window.
    */
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-  }
-  /* [END maps_test_example] */
-
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_test_example] */
diff --git a/dist/samples/test-example/dist/assets/index-35dha72j.js b/dist/samples/test-example/dist/assets/index-35dha72j.js
diff --git a/...st-example/dist/assets/index-kz-ac4rW.css → ...st-example/dist/assets/index-BQyHTEHy.css b/...st-example/dist/assets/index-kz-ac4rW.css → ...st-example/dist/assets/index-BQyHTEHy.css
@@ -2,4 +2,4 @@
  * @license
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
- */#map{height:100%}html,body{height:100%;margin:0;padding:0}
+ */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/test-example/dist/assets/index-Bu9F1ASI.js b/dist/samples/test-example/dist/assets/index-Bu9F1ASI.js
diff --git a/dist/samples/test-example/dist/index.html b/dist/samples/test-example/dist/index.html
@@ -9,19 +9,25 @@
   <head>
     <title>Add a Map</title>
 
-    <script type="module" crossorigin src="./assets/index-35dha72j.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-kz-ac4rW.css">
+
+    <!-- Add the inline bootstrap loader to the document head. -->
+    <!-- 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>
+    <script type="module" crossorigin src="./assets/index-Bu9F1ASI.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BQyHTEHy.css">
   </head>
   <body>
     <!--[START maps_test_example_heading]-->
     <h3>Maps Test Example</h3>
     <!--[END maps_test_example_heading]-->
     <!--[START maps_test_example_body]-->
-    <div id="map"></div>
+    <!-- Add a gmp-map element to display the map. -->
+    <gmp-map center="-25.344, 131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!-- Nest markers and UI controls inside the gmp-map element. -->
+      <gmp-advanced-marker></gmp-advanced-marker>
+    </gmp-map>
     <!--[END maps_test_example_body]-->
-    <!-- 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_test_example]-->
diff --git a/dist/samples/test-example/docs/index.html b/dist/samples/test-example/docs/index.html
@@ -11,17 +11,23 @@
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
+
+    <!-- Add the inline bootstrap loader to the document head. -->
+    <!-- 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>
     <!--[START maps_test_example_heading]-->
     <h3>Maps Test Example</h3>
     <!--[END maps_test_example_heading]-->
     <!--[START maps_test_example_body]-->
-    <div id="map"></div>
+    <!-- Add a gmp-map element to display the map. -->
+    <gmp-map center="-25.344, 131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!-- Nest markers and UI controls inside the gmp-map element. -->
+      <gmp-advanced-marker></gmp-advanced-marker>
+    </gmp-map>
     <!--[END maps_test_example_body]-->
-    <!-- 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_test_example]-->
diff --git a/dist/samples/test-example/docs/index.js b/dist/samples/test-example/docs/index.js
@@ -4,28 +4,35 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+/*
+ * This is a special sample! Having a dedicated test sample makes it easier to
+ * test changes in a world where sometimes changes must be merged in order to
+ * test them. This way we can avoid making changes to published content.
+ */
 // TEST COMMENT 007
 // [START maps_test_example]
-// Initialize and add the map.
-let map;
+// Declare the gmp-map element.
+const mapElement = document.querySelector("gmp-map");
+let innerMap;
+const advancedMarkerElement = document.querySelector("gmp-advanced-marker");
+let center;
 async function initMap() {
     // [START maps_test_example_instantiate_map]
-    // The location of Uluru.
-    const position = { lat: -25.344, lng: 131.031 };
     //  Request the needed libraries.
-    const { Map } = await google.maps.importLibrary('maps');
-    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
-    // The map, centered at Uluru.
-    map = new Map(document.getElementById('map'), {
-        zoom: 4,
-        center: position,
-        mapId: 'DEMO_MAP_ID',
+    const { Map } = (await google.maps.importLibrary("maps"));
+    const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker"));
+    // Get the inner map from the gmp-map element.
+    innerMap = mapElement.innerMap;
+    innerMap.setOptions({
+        mapTypeControl: false,
     });
     // [END maps_test_example_instantiate_map]
+    // Get the lat/lng from the inner map.
+    center = innerMap.getCenter();
     // [START maps_test_example_instantiate_marker]
-    // The marker, positioned at Uluru.
-    const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' });
-    // [END maps_test_example_instantiate_marker]  
+    // Add a marker, positioned at Uluru.
+    const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" });
+    // [END maps_test_example_instantiate_marker]
 }
 initMap();
 // [END maps_test_example]
diff --git a/dist/samples/test-example/docs/index.ts b/dist/samples/test-example/docs/index.ts
@@ -3,33 +3,46 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+/*
+ * This is a special sample! Having a dedicated test sample makes it easier to
+ * test changes in a world where sometimes changes must be merged in order to
+ * test them. This way we can avoid making changes to published content.
+ */
+
 // TEST COMMENT 007
 // [START maps_test_example]
-// Initialize and add the map.
-let map;
+// Declare the gmp-map element.
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+let innerMap;
+const advancedMarkerElement = document.querySelector(
+  "gmp-advanced-marker"
+) as google.maps.marker.AdvancedMarkerElement;
+let center;
+
 async function initMap(): Promise<void> {
   // [START maps_test_example_instantiate_map]
-  // The location of Uluru.
-  const position = {lat: -25.344, lng: 131.031};
-
   //  Request the 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;
 
-  // The map, centered at Uluru.
-  map = new Map(document.getElementById('map') as HTMLElement, {
-    zoom: 4,
-    center: position,
-    mapId: 'DEMO_MAP_ID',
+  // Get the inner map from the gmp-map element.
+  innerMap = mapElement.innerMap;
+  innerMap.setOptions({
+    mapTypeControl: false,
   });
   // [END maps_test_example_instantiate_map]
 
+  // Get the lat/lng from the inner map.
+  center = innerMap.getCenter();
+
   // [START maps_test_example_instantiate_marker]
-  // The marker, positioned at Uluru.
-  const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
-  // [END maps_test_example_instantiate_marker]  
+  // Add a marker, positioned at Uluru.
+  const marker = new AdvancedMarkerElement({ map: innerMap, position: center, title: "Uluru" });
+  // [END maps_test_example_instantiate_marker]
 }
 initMap();
 // [END maps_test_example]
diff --git a/dist/samples/test-example/docs/style.css b/dist/samples/test-example/docs/style.css
@@ -4,22 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* [START maps_test_example] */
- /*
+/*
  * Always set the map height explicitly to define the size of the div element
  * that contains the map.
  */
- #map {
-    height: 100%;
-  }
-  
-  /*
+gmp-map {
+  height: 100%;
+}
+
+/*
    * Optional: Makes the sample page fill the window.
    */
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-  }
-  /* [END maps_test_example] */
-
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_test_example] */
diff --git a/dist/samples/test-example/jsfiddle/demo.css b/dist/samples/test-example/jsfiddle/demo.css
@@ -4,22 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- /*
+/*
  * Always set the map height explicitly to define the size of the div element
  * that contains the map.
  */
- #map {
-    height: 100%;
-  }
-  
-  /*
+gmp-map {
+  height: 100%;
+}
+
+/*
    * Optional: Makes the sample page fill the window.
    */
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+