fix: Google Maps JavaScript API has been loaded directly without load…

…ing=async. This can result in suboptimal performance.
kashaudhan · Apr 29, 2024 · bc3e4e4 · bc3e4e4
1 parent 7eb4808
commit bc3e4e4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -74,5 +74,8 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.5.2",
     "typescript": "^5.1.3"
+  },
+  "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.6"
   }
 }
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react';
-import { loadScript, isValidLocation } from './utils';
+import { isValidLocation } from './utils';
 import { PickerProps } from './types';
+import { Loader } from '@googlemaps/js-api-loader';
 
 const Picker = (props: PickerProps) => {
   const {
@@ -44,13 +45,26 @@ const Picker = (props: PickerProps) => {
       ? defaultLocation
       : { lat: 0, lng: 0 };
 
-    map.current = new google.maps.Map(document.getElementById(MAP_VIEW_ID)!, {
-      center: validLocation,
-      zoom: zoom,
-      mapId: MAP_VIEW_ID,
-      ...(mapTypeId && { mapTypeId }),
+    const loader = new Loader({
+      apiKey: apiKey,
+      version: 'weekly',
     });
 
+    loader.load().then(async () => {
+      const validLocation = isValidLocation(defaultLocation)
+        ? defaultLocation
+        : { lat: 0, lng: 0 };
+      const { Map } = (await google.maps.importLibrary(
+        'maps'
+      )) as google.maps.MapsLibrary;
+      map.current = new Map(document.getElementById(MAP_VIEW_ID)!, {
+        center: validLocation,
+        zoom: zoom,
+        mapId: MAP_VIEW_ID,
+        ...(mapTypeId && { mapTypeId }),
+      });
+    });
+
     if (!marker.current) {
       const { AdvancedMarkerElement } = (await google.maps.importLibrary(
         'marker'
@@ -94,7 +108,10 @@ const Picker = (props: PickerProps) => {
   }, [zoom]);
 
   useEffect(() => {
-    loadScript(apiKey)?.then(loadMap);
+    (async () => {
+      // await loadScript(apiKey);
+      await loadMap()
+    })()
   }, []);
 
   return <div id={MAP_VIEW_ID} style={componentStyle} className={className} />;

diff --git a/src/types.tsx b/src/types.tsx
@@ -11,7 +11,7 @@ export type PickerProps = {
   onChangeZoom?(zoom: number): void;
   style?: any;
   className?: string;
-  mapTypeId?: google.maps.MapTypeId;
+  mapTypeId?: google.maps.MapTypeId | undefined | string;
   // icon?: string | google.maps.Icon | google.maps.Symbol | null | undefined; // https://developers.google.com/maps/documentation/javascript/markers#icons
-  alwaysCentered?: boolean
+  // alwaysCentered?: boolean
 };
diff --git a/src/utils.ts b/src/utils.ts
@@ -13,26 +13,6 @@ export const isMapLoaded = (id: string): boolean => {
   return false;
 };
 
-export const loadScript = (API_KEY: string) => {
-
-  const el = document.getElementById("google-map");
-
-  if(el) return;
-
-  const script = document.createElement('script');
-  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=initMap`;
-  script.setAttribute("type", "module");
-  script.setAttribute('id', "google-map");
-  document.head.appendChild(script);
-
-  return new Promise<void>(resolve => {
-    (window as any).initMap = function() {
-      // JS API is loaded and available
-      resolve()
-    };
-  });
-};
-
 export const isValidLocation = (location: Location) => {
   return (
     location && Math.abs(location.lat) <= 90 && Math.abs(location.lng) <= 180

diff --git a/yarn.lock b/yarn.lock
@@ -1109,6 +1109,13 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
   integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
 
+"@googlemaps/js-api-loader@^1.16.6":
+  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"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -3185,7 +3192,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==