googlemaps-samples · willum070 · Oct 23, 2025 · Oct 23, 2025
diff --git a/dist/samples/add-map/app/index.html b/dist/samples/add-map/app/index.html
@@ -1,27 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 -->
- <!--[START maps_add_map]-->
+<!--[START maps_add_map]-->
 <html>
   <head>
     <title>Add a Map</title>
 
     <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>
-    <!--[START maps_add_map_heading]-->
-    <h3>My Google Maps Demo</h3>
-    <!--[END maps_add_map_heading]-->
     <!--[START maps_add_map_body]-->
-    <div id="map"></div>
+    <!-- The map, centered at Uluru, Australia. -->
+    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!--[START maps_add_map_controls]-->
+      <div id="controls" slot="control-inline-start-block-start">
+        <h3>My Google Maps Demo</h3>
+      </div>
+      <!--[END maps_add_map_controls]-->
+    </gmp-map>
     <!--[END maps_add_map_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_add_map]-->
+<!--[END maps_add_map]-->
diff --git a/dist/samples/add-map/app/index.ts b/dist/samples/add-map/app/index.ts
@@ -5,31 +5,39 @@
  */
 
 // [START maps_add_map]
-// Initialize and add the map.
-let map;
 async function initMap(): Promise<void> {
   // [START maps_add_map_instantiate_map]
-  // The location of Uluru, Australia.
-  const position = {lat: -25.344, lng: 131.031};
-
+  // [START maps_add_map_libraries]
   //  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 }, { AdvancedMarkerElement }] = await Promise.all([
+    google.maps.importLibrary("maps") as Promise<google.maps.MapsLibrary>,
+    google.maps.importLibrary("marker") as Promise<google.maps.MarkerLibrary>,
+  ]);
+  // [END maps_add_map_libraries]
+  // [START maps_add_map_innermap]
+  // Get the gmp-map element.
+  const mapElement = document.querySelector(
+    "gmp-map"
+  ) as google.maps.MapElement;
+
+  // Get the inner map.
+  const innerMap = mapElement.innerMap;
 
-  // The map, centered at Uluru, Australia.
-  map = new Map(document.getElementById('map') as HTMLElement, {
-    zoom: 4,
-    center: position,
-    mapId: 'DEMO_MAP_ID',
+  // Set map options.
+  innerMap.setOptions({
+    mapTypeControl: false,
   });
+  // [END maps_add_map_innermap]
   // [END maps_add_map_instantiate_map]
 
   // [START maps_add_map_instantiate_marker]
-  // The marker, positioned at Uluru.
-  const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
-  // [END maps_add_map_instantiate_marker]  
+  // Add a marker positioned at the map center (Uluru).
+  const marker = new AdvancedMarkerElement({
+    map: innerMap,
+    position: mapElement.center,
+    title: "Uluru/Ayers Rock",
+  });
+  // [END maps_add_map_instantiate_marker]
 }
 initMap();
 // [END maps_add_map]
diff --git a/dist/samples/add-map/app/style.css b/dist/samples/add-map/app/style.css
@@ -4,22 +4,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 /* [START maps_add_map] */
- /*
+/*
  * 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_add_map] */
-
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_add_map] */
+
+#controls h3 {
+  font-size: 1.5em;
+  background-color: white;
+  margin: 8px;
+  padding: 2px;
+}
diff --git a/dist/samples/add-map/dist/assets/index-35dha72j.js b/dist/samples/add-map/dist/assets/index-35dha72j.js
diff --git a/dist/samples/add-map/dist/assets/index-BJeCMP20.css b/dist/samples/add-map/dist/assets/index-BJeCMP20.css
@@ -0,0 +1,5 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}#controls h3{font-size:1.5em;background-color:#fff;margin:8px;padding:2px}
diff --git a/dist/samples/add-map/dist/assets/index-RaMcGHQe.js b/dist/samples/add-map/dist/assets/index-RaMcGHQe.js
diff --git a/dist/samples/add-map/dist/assets/index-kz-ac4rW.css b/dist/samples/add-map/dist/assets/index-kz-ac4rW.css
diff --git a/dist/samples/add-map/dist/index.html b/dist/samples/add-map/dist/index.html
@@ -1,27 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 -->
- <!--[START maps_add_map]-->
+<!--[START maps_add_map]-->
 <html>
   <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">
+    <!-- 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-RaMcGHQe.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BJeCMP20.css">
   </head>
   <body>
-    <!--[START maps_add_map_heading]-->
-    <h3>My Google Maps Demo</h3>
-    <!--[END maps_add_map_heading]-->
     <!--[START maps_add_map_body]-->
-    <div id="map"></div>
+    <!-- The map, centered at Uluru, Australia. -->
+    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!--[START maps_add_map_controls]-->
+      <div id="controls" slot="control-inline-start-block-start">
+        <h3>My Google Maps Demo</h3>
+      </div>
+      <!--[END maps_add_map_controls]-->
+    </gmp-map>
     <!--[END maps_add_map_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_add_map]-->
+<!--[END maps_add_map]-->
diff --git a/dist/samples/add-map/docs/index.html b/dist/samples/add-map/docs/index.html
@@ -1,27 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
  @license
  Copyright 2025 Google LLC. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 -->
- <!--[START maps_add_map]-->
+<!--[START maps_add_map]-->
 <html>
   <head>
     <title>Add a Map</title>
 
     <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>
-    <!--[START maps_add_map_heading]-->
-    <h3>My Google Maps Demo</h3>
-    <!--[END maps_add_map_heading]-->
     <!--[START maps_add_map_body]-->
-    <div id="map"></div>
+    <!-- The map, centered at Uluru, Australia. -->
+    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
+      <!--[START maps_add_map_controls]-->
+      <div id="controls" slot="control-inline-start-block-start">
+        <h3>My Google Maps Demo</h3>
+      </div>
+      <!--[END maps_add_map_controls]-->
+    </gmp-map>
     <!--[END maps_add_map_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_add_map]-->
+<!--[END maps_add_map]-->
diff --git a/dist/samples/add-map/docs/index.js b/dist/samples/add-map/docs/index.js
@@ -5,26 +5,34 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 // [START maps_add_map]
-// Initialize and add the map.
-let map;
 async function initMap() {
     // [START maps_add_map_instantiate_map]
-    // The location of Uluru, Australia.
-    const position = { lat: -25.344, lng: 131.031 };
+    // [START maps_add_map_libraries]
     //  Request the needed libraries.
-    const { Map } = await google.maps.importLibrary('maps');
-    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
-    // The map, centered at Uluru, Australia.
-    map = new Map(document.getElementById('map'), {
-        zoom: 4,
-        center: position,
-        mapId: 'DEMO_MAP_ID',
+    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
+        google.maps.importLibrary("maps"),
+        google.maps.importLibrary("marker"),
+    ]);
+    // [END maps_add_map_libraries]
+    // [START maps_add_map_innermap]
+    // Get the gmp-map element.
+    const mapElement = document.querySelector("gmp-map");
+    // Get the inner map.
+    const innerMap = mapElement.innerMap;
+    // Set map options.
+    innerMap.setOptions({
+        mapTypeControl: false,
     });
+    // [END maps_add_map_innermap]
     // [END maps_add_map_instantiate_map]
     // [START maps_add_map_instantiate_marker]
-    // The marker, positioned at Uluru.
-    const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' });
-    // [END maps_add_map_instantiate_marker]  
+    // Add a marker positioned at the map center (Uluru).
+    const marker = new AdvancedMarkerElement({
+        map: innerMap,
+        position: mapElement.center,
+        title: "Uluru/Ayers Rock",
+    });
+    // [END maps_add_map_instantiate_marker]
 }
 initMap();
 // [END maps_add_map]
diff --git a/dist/samples/add-map/docs/index.ts b/dist/samples/add-map/docs/index.ts
@@ -5,31 +5,39 @@
  */
 
 // [START maps_add_map]
-// Initialize and add the map.
-let map;
 async function initMap(): Promise<void> {
   // [START maps_add_map_instantiate_map]
-  // The location of Uluru, Australia.
-  const position = {lat: -25.344, lng: 131.031};
-
+  // [START maps_add_map_libraries]
   //  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 }, { AdvancedMarkerElement }] = await Promise.all([
+    google.maps.importLibrary("maps") as Promise<google.maps.MapsLibrary>,
+    google.maps.importLibrary("marker") as Promise<google.maps.MarkerLibrary>,
+  ]);
+  // [END maps_add_map_libraries]
+  // [START maps_add_map_innermap]
+  // Get the gmp-map element.
+  const mapElement = document.querySelector(
+    "gmp-map"
+  ) as google.maps.MapElement;
+
+  // Get the inner map.
+  const innerMap = mapElement.innerMap;
 
-  // The map, centered at Uluru, Australia.
-  map = new Map(document.getElementById('map') as HTMLElement, {
-    zoom: 4,
-    center: position,
-    mapId: 'DEMO_MAP_ID',
+  // Set map options.
+  innerMap.setOptions({
+    mapTypeControl: false,
   });
+  // [END maps_add_map_innermap]
   // [END maps_add_map_instantiate_map]
 
   // [START maps_add_map_instantiate_marker]
-  // The marker, positioned at Uluru.
-  const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
-  // [END maps_add_map_instantiate_marker]  
+  // Add a marker positioned at the map center (Uluru).
+  const marker = new AdvancedMarkerElement({
+    map: innerMap,
+    position: mapElement.center,
+    title: "Uluru/Ayers Rock",
+  });
+  // [END maps_add_map_instantiate_marker]
 }
 initMap();
 // [END maps_add_map]