googlemaps-samples · oppenheimera · Mar 12, 2025 · Mar 19, 2025
diff --git a/samples/3d-places/index.html b/samples/3d-places/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-places/index.ts b/samples/3d-places/index.ts
@@ -0,0 +1,90 @@
+/*
+ * 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 maps3d_places]
+let map3DElement = null;
+async function init() {
+    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
+    map3DElement = new Map3DElement({
+        center: {lat: 0, lng: 0, altitude: 16000000},
+        mode: MapMode.HYBRID,
+    });
+    document.body.append(map3DElement);
+    initAutocomplete();
+}
+async function initAutocomplete() {
+    const { Autocomplete } = await google.maps.importLibrary("places");
+    const autocomplete = new Autocomplete(
+        document.getElementById("pac-input"),
+        {
+            fields: [
+                "geometry",
+                "name",
+                "place_id"
+            ],
+        }
+    );
+    autocomplete.addListener("place_changed", () => {
+        //viewer.entities.removeAll();
+        const place = autocomplete.getPlace();
+        if (!place.geometry || !place.geometry.viewport) {
+            window.alert("No viewport for input: " + place.name);
+            return;
+        }
+        zoomToViewport(place.geometry);
+    });
+}
+const zoomToViewport = async (geometry) => {
+    const { AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d");
+    let viewport = geometry.viewport;
+    let locationPoints = [
+        { lat: viewport.getNorthEast().lat(), lng: viewport.getNorthEast().lng() },
+        { lat: viewport.getSouthWest().lat(), lng: viewport.getNorthEast().lng() },
+        { lat: viewport.getSouthWest().lat(), lng: viewport.getSouthWest().lng() },
+        { lat: viewport.getNorthEast().lat(), lng: viewport.getSouthWest().lng() },
+        { lat: viewport.getNorthEast().lat(), lng: viewport.getNorthEast().lng() }
+    ];
+    let locationPolyline = new Polyline3DElement({
+        altitudeMode: AltitudeMode.CLAMP_TO_GROUND,
+        strokeColor: "blue",
+        strokeWidth: 10,
+        coordinates: locationPoints,
+    });
+    map3DElement.append(locationPolyline);
+    console.log(locationPolyline);
+    let elevation = await getElevationforPoint(geometry.location);
+    if (map3DElement) {
+        map3DElement.center = { lat: geometry.location.lat(), lng: geometry.location.lng(), altitude: elevation + 50 };
+        map3DElement.heading = 0;
+        map3DElement.range = 1000;
+        map3DElement.tilt = 65;
+    }
+};
+async function getElevationforPoint(location) {
+    const { ElevationService } = await google.maps.importLibrary("elevation");
+    // Get place elevation using the ElevationService.
+    const elevatorService = new google.maps.ElevationService();
+    const elevationResponse = await elevatorService.getElevationForLocations({
+        locations: [location],
+    });
+    if (!(elevationResponse.results && elevationResponse.results.length)) {
+        window.alert(`Insufficient elevation data for place: ${place.name}`);
+        return;
+    }
+    const elevation = elevationResponse.results[0].elevation || 10;
+    return elevation;
+}
+init();
+// [END maps3d_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,22 @@
+/*
+ * 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 3d_places] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+#map {
+  height: 100%;
+}
+
+/* [END 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-simple-map/index.html b/samples/3d-simple-map/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Simple Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <gmp-map-3d mode="hybrid" center="37.7704,-122.3985,500" tilt="67.5"></gmp-map-3d>
+
+    <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-simple-map/index.ts b/samples/3d-simple-map/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 maps3d_simple_map]
+
+// [END maps3d_simple_map]
diff --git a/samples/3d-simple-map/package.json b/samples/3d-simple-map/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-simple-map",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-simple-map && bash ../app.sh 3d-simple-map && bash ../docs.sh 3d-simple-map &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-simple-map",
+    "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-simple-map/style.css b/samples/3d-simple-map/style.css
@@ -0,0 +1,22 @@
+/*
+ * 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 3d_simple_map] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+#gmp-map-3d {
+  height: 100%;
+}
+
+/* [END 3d_simple_map] */
diff --git a/samples/3d-simple-map/tsconfig.json b/samples/3d-simple-map/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"
+  }
+}