Update google maps examples (#8740)

visgl · Apr 2, 2024 · 1c5b156 · 1c5b156
1 parent c073cc4
commit 1c5b156
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 30 deletions.
diff --git a/examples/get-started/pure-js/google-maps/app.js b/examples/get-started/pure-js/google-maps/app.js
@@ -1,6 +1,7 @@
 /* global document, google */
 import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
+import {Loader} from "@googlemaps/js-api-loader";
 
 // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
 const AIR_PORTS =
@@ -9,21 +10,14 @@ const AIR_PORTS =
 // Set your Google Maps API key here or via environment variable
 const GOOGLE_MAPS_API_KEY = process.env.GoogleMapsAPIKey; // eslint-disable-line
 const GOOGLE_MAP_ID = process.env.GoogleMapsMapId; // eslint-disable-line
-const GOOGLE_MAPS_API_URL = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&v=beta&map_ids=${GOOGLE_MAP_ID}`;
 
-function loadScript(url) {
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = url;
-  const head = document.querySelector('head');
-  head.appendChild(script);
-  return new Promise(resolve => {
-    script.onload = resolve;
-  });
-}
+const loader = new Loader({
+  apiKey: GOOGLE_MAPS_API_KEY,
+  version: "quarterly"
+});
 
-loadScript(GOOGLE_MAPS_API_URL).then(() => {
-  const map = new google.maps.Map(document.getElementById('map'), {
+loader.importLibrary('maps').then((googlemaps) => {
+  const map = new googlemaps.Map(document.getElementById('map'), {
     center: {lat: 51.47, lng: 0.45},
     zoom: 5,
     mapId: GOOGLE_MAP_ID

diff --git a/examples/get-started/pure-js/google-maps/package.json b/examples/get-started/pure-js/google-maps/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "@deck.gl/core": "^9.0.0-beta.2",
     "@deck.gl/google-maps": "^9.0.0-beta.2",
-    "@deck.gl/layers": "^9.0.0-beta.2"
+    "@deck.gl/layers": "^9.0.0-beta.2",
+    "@googlemaps/js-api-loader": "^1.16.0"
   },
   "devDependencies": {
     "vite": "^4.0.0"

diff --git a/examples/website/google-3d/app.js b/examples/website/google-3d/app.js
@@ -2,45 +2,37 @@
 import {GoogleMapsOverlay as DeckOverlay} from '@deck.gl/google-maps';
 import {ScenegraphLayer} from '@deck.gl/mesh-layers';
 import {PathLayer} from '@deck.gl/layers';
+import {Loader} from "@googlemaps/js-api-loader";
 
 import TripBuilder from './trip-builder';
 
 // Set your Google Maps API key here or via environment variable
 const GOOGLE_MAPS_API_KEY = process.env.GoogleMapsAPIKey; // eslint-disable-line
 const GOOGLE_MAP_ID = process.env.GoogleMapsMapId; // eslint-disable-line
-const GOOGLE_MAPS_API_URL = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&v=beta`;
 
 const DATA_URL =
   'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d/trips.json'; // eslint-disable-line
 const MODEL_URL =
   'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d/truck.gltf'; // eslint-disable-line
 
-function loadScript(url) {
-  if (typeof google !== 'undefined') {
-    return Promise.resolve();
-  }
-  return new Promise(resolve => {
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = url;
-    script.onload = resolve;
-    document.head.appendChild(script);
-  });
-}
-
 export async function renderToDOM(
   container,
   options = {
     tracking: true,
     showPaths: true
   }
 ) {
-  await loadScript(GOOGLE_MAPS_API_URL);
+  const loader = new Loader({
+    apiKey: GOOGLE_MAPS_API_KEY,
+    version: "quarterly"
+  });
+
+  const googlemaps = await loader.importLibrary('maps');
 
   const resp = await fetch(DATA_URL);
   const data = await resp.json();
 
-  const map = new google.maps.Map(container, {
+  const map = new googlemaps.Map(container, {
     center: {lng: -95.36403, lat: 29.756433},
     zoom: 19,
     heading: 0,

diff --git a/examples/website/google-3d/package.json b/examples/website/google-3d/package.json
@@ -9,6 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.0",
     "@turf/rhumb-bearing": "^6.5.0",
     "@turf/rhumb-distance": "^6.5.0",
     "deck.gl": "^8.8.0"

diff --git a/website/package.json b/website/package.json
@@ -14,6 +14,7 @@
     "write-heading-ids": "node --loader ts-node/esm ../scripts/write-heading-ids.ts"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.0",
     "@loaders.gl/i3s": "^4.1.4",
     "@loaders.gl/las": "^4.1.4",
     "@loaders.gl/obj": "^4.1.4",

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -1864,6 +1864,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@googlemaps/js-api-loader@^1.16.0":
+  version "1.16.6"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.16.6.tgz#c89970c94b55796d51746c092f0e52953994a171"
+  integrity sha512-V8p5W9DbPQx74jWUmyYJOerhiB4C+MHekaO0ZRmc6lrOYrvY7+syLhzOWpp55kqSPeNb+qbC2h8i69aLIX6krQ==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hapi/hoek@^9.0.0":
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"