googlemaps-samples · willum070 · Apr 10, 2025 · Apr 8, 2025 · Apr 9, 2025 · Apr 9, 2025
diff --git a/samples/.DS_Store b/samples/.DS_Store
diff --git a/samples/3d-marker-customization/index.html b/samples/3d-marker-customization/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <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: "alpha",});</script>
+  </body>
+</html>
diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts
@@ -0,0 +1,108 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * * https://www.apache.org/licenses/LICENSE-2.0
+ * * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
+// @ts-nocheck
+// [START maps_3d_marker_customization]
+async function init() {
+    const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
+    const { PinElement } = await google.maps.importLibrary("marker");
+
+    const map = new Map3DElement({
+        center: { lat: 37.4176, lng: -122.02, altitude: 0 },
+        tilt: 67.5,
+        range: 7000,
+        mode: 'HYBRID'
+    });
+
+    map.mode = "SATELLITE";
+
+    // Change the border color.
+    const pinBorder = new PinElement({
+        borderColor: '#FFFFFF',
+    });
+    const markerWithBorder = new Marker3DElement({
+        position: { lat: 37.415, lng: -122.035 },
+    });
+    markerWithBorder.append(pinBorder);
+
+    // Add a label.
+    const markerWithLabel = new Marker3DElement({
+        position: { lat: 37.419, lng: -122.03 },
+        label: 'Simple label'
+    });
+
+    // Adjust the scale.
+    const pinScaled = new PinElement({
+        scale: 1.5,
+    });
+    const markerWithScale = new Marker3DElement({
+        position: { lat: 37.419, lng: -122.02 },
+    });
+    markerWithScale.append(pinScaled);
+
+    // Change the glyph color.
+    const pinGlyph = new PinElement({
+        glyphColor: 'white',
+    });
+    const markerWithGlyphColor = new Marker3DElement({
+        position: { lat: 37.415, lng: -122.025 },
+    });
+    markerWithGlyphColor.append(pinGlyph);
+
+    // Change many elements together and extrude marker.
+    const pinTextGlyph = new PinElement({
+        background: '#F0F6FC',
+        glyph: 'E',
+        glyphColor: 'red',
+        borderColor: '#0000FF',
+    });
+    const markerWithGlyphText = new Marker3DElement({
+        position: { lat: 37.415, lng: -122.015, altitude: 50 },
+        extruded: true,
+        altitudeMode: "RELATIVE_TO_GROUND",
+    });
+    markerWithGlyphText.append(pinTextGlyph);
+
+    // Hide the glyph.
+    const pinNoGlyph = new PinElement({
+        glyph: '',
+    });
+    const markerWithNoGlyph = new Marker3DElement({
+        position: { lat: 37.415, lng: -122.005 },
+    });
+    markerWithNoGlyph.append(pinNoGlyph);
+
+    // Change the background color.
+    const pinBackground = new PinElement({
+        background: '#FBBC04',
+    });
+
+    const markerWithBackground = new Marker3DElement({
+        position: { lat: 37.419, lng: -122.01 },
+    });
+    markerWithBackground.append(pinBackground);
+
+    map.append(markerWithLabel);
+    map.append(markerWithScale);
+    map.append(markerWithBackground);
+    map.append(markerWithBorder);
+    map.append(markerWithGlyphColor);
+    map.append(markerWithGlyphText);
+    map.append(markerWithNoGlyph);
+
+    document.body.append(map);
+}
+
+init();
+// [END maps_3d_marker_customization]
diff --git a/samples/3d-marker-customization/package.json b/samples/3d-marker-customization/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-marker-customization",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-marker-customization && bash ../app.sh 3d-marker-customization && bash ../docs.sh 3d-marker-customization &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-customization",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/samples/3d-marker-customization/style.css b/samples/3d-marker-customization/style.css
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * * https://www.apache.org/licenses/LICENSE-2.0
+ * * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+/* [START maps_3d_marker_customization] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+html,
+map {
+  height: 100%;
+}
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_3d_marker_customization] */
diff --git a/samples/3d-marker-customization/tsconfig.json b/samples/3d-marker-customization/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "es2015",
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
diff --git a/samples/3d-places/index.html b/samples/3d-places/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <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: "alpha",});</script>
+    <div id="details" class="detailsContainer">
+        <div id="placeName"></div>
+        <div id="placeId"></div>
+        <div id="placeType"></div>
+    </div>    
+    <div class="textContainer">
+        <div class="text">Click on a place to get details.</div>
+    </div> 
+  </body>
+</html>
diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * * https://www.apache.org/licenses/LICENSE-2.0
+ * * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+//@ts-nocheck
+// [START maps_3d_places]
+let map3DElement = null;
+async function init() {
+    const { Map3DElement } = await google.maps.importLibrary("maps3d");
+    {  }
+    map3DElement = new Map3DElement({
+        center: { lat: 51.532, lng : -0.124, altitude: 30 }, 
+        range: 1400, 
+        tilt: 64,
+        heading: -5,
+        mode: 'HYBRID'
+    });
+
+    document.body.append(map3DElement);
+
+    map3DElement.addEventListener('gmp-click', async (event) => {
+        if (event.placeId) {
+            const place = await event.fetchPlace();
+            await place.fetchFields({ fields: ['*'] });
+
+            // Display place details.
+            document.getElementById("placeName").innerHTML = "<b>Name :</b><br>&nbsp;" + place.displayName;     
+            document.getElementById("placeId").innerHTML = "<b>Id :</b><br>&nbsp;" + place.id;     
+            document.getElementById("placeType").innerHTML = "<b>Types :<b/>";
+
+            for (const type of place.types) {
+                document.getElementById("placeType").innerHTML += "<br>&nbsp;" + type ;
+            }
+
+            document.getElementById("details").style.display = "block";
+        }
+    });
+
+}
+init(); 
+// [END maps_3d_places]
diff --git a/samples/3d-places/package.json b/samples/3d-places/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-places",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-places && bash ../app.sh 3d-places && bash ../docs.sh 3d-places &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-places",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/samples/3d-places/style.css b/samples/3d-places/style.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * * https://www.apache.org/licenses/LICENSE-2.0
+ * * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+/* [START maps_3d_places] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: "Centra No2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 0.9em;
+}
+
+.textContainer {
+    background-color: #4d90fe;
+    margin: 10px;
+    overflow: hidden;
+    position: absolute;
+    left: 50%;
+    top: 10px;
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 5px;
+    z-index: 1000;
+    color: white;
+}
+
+.detailsContainer {
+    background-color: #00000078;
+    margin: 10px;
+    overflow: hidden;
+    position: absolute;
+    top: 100px;
+    left : 10px;
+    padding: 10px;
+    z-index: 1000;
+    display:none;
+    color: white;
+    border-radius: 15px;
+}
+
+/* [END maps_3d_places] */
diff --git a/samples/3d-places/tsconfig.json b/samples/3d-places/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "es2015",
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
diff --git a/samples/3d-popover-location/index.html b/samples/3d-popover-location/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <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: "alpha",});</script>
+  </body>
+</html>