@vis.gl/react-google-maps - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

dist/components/api-provider.d.ts

 /// <reference types="google.maps" />
 import React, { PropsWithChildren, ReactElement } from 'react';
-export declare enum APILoadingStatus {
-    NOT_LOADED = "NOT_LOADED",
-    LOADING = "LOADING",
-    LOADED = "LOADED",
-    FAILED = "FAILED"
-}
+import { APILoadingStatus } from '../libraries/api-loading-status';
 type ImportLibraryFunction = typeof google.maps.importLibrary;
@@ -10,0 +5,0 @@ type GoogleMapsLibrary = Awaited<ReturnType<ImportLibraryFunction>>;

dist/components/map/index.d.ts

@@ -8,2 +8,3 @@ /// <reference types="google.maps" />
 export declare const GoogleMapsContext: React.Context<GoogleMapsContextValue | null>;
+export type { MapCameraChangedEvent, MapEvent, MapEventProps, MapMouseEvent } from './use-map-events';
 /**
@@ -10,0 +11,0 @@ * Props for the Google Maps Map Component

dist/hooks/use-api-loading-status.d.ts

@@ -1,2 +0,2 @@
-import { APILoadingStatus } from '../components/api-provider';
+import { APILoadingStatus } from '../libraries/api-loading-status';
 export declare function useApiLoadingStatus(): APILoadingStatus;

dist/index.umd.js

@@ -82,2 +82,10 @@ (function (global, factory) {
 
+  var APILoadingStatus = {
+    NOT_LOADED: 'NOT_LOADED',
+    LOADING: 'LOADING',
+    LOADED: 'LOADED',
+    FAILED: 'FAILED',
+    AUTH_FAILURE: 'AUTH_FAILURE'
+  };
+
   var _iteratorSymbol$1 = typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
@@ -248,3 +256,3 @@ function _settle$1(pact, state, value) {
      * Loads the Google Maps API with the specified parameters.
-     * Since the maps library can only be loaded once per page, this will
+     * Since the Maps library can only be loaded once per page, this will
      * produce a warning when called multiple times with different
@@ -255,5 +263,4 @@ * parameters.
      * and rejects in case of an error or when the loading was aborted.
-     * @param params
      */
-    GoogleMapsApiLoader.load = function load(params) {
+    GoogleMapsApiLoader.load = function load(params, onLoadingStatusChange) {
       try {
@@ -264,7 +271,18 @@ var _window$google;
         var serializedParams = _this.serializeParams(params);
+        // note: if google.maps.importLibrary was defined externally, the params
+        //   will be ignored. If it was defined by a previous call to this
+        //   method, we will check that the key and other parameters have not been
+        //   changed in between calls.
         if (!((_window$google = window.google) != null && (_window$google = _window$google.maps) != null && _window$google.importLibrary)) {
-          window.__googleMapsApiParams__ = serializedParams;
-          _this.initImportLibrary(params);
+          _this.serializedApiParams = serializedParams;
+          _this.initImportLibrary(params, onLoadingStatusChange);
+        } else {
+          // if serializedApiParams isn't defined the library was loaded externally
+          // and we can only assume that went alright.
+          if (!_this.serializedApiParams) {
+            _this.loadingStatus = APILoadingStatus.LOADED;
+          }
+          onLoadingStatusChange(_this.loadingStatus);
         }
-        if (window.__googleMapsApiParams__ && window.__googleMapsApiParams__ !== serializedParams) {
+        if (_this.serializedApiParams && _this.serializedApiParams !== serializedParams) {
           console.warn("The maps API has already been loaded with different " + "parameters and will not be loaded again. Refresh the page for " + "new values to have effect.");
@@ -283,3 +301,4 @@ }
     };
-    GoogleMapsApiLoader.initImportLibrary = function initImportLibrary(params) {
+    GoogleMapsApiLoader.initImportLibrary = function initImportLibrary(params, onLoadingStatusChange) {
+      var _this2 = this;
       if (!window.google) window.google = {};
@@ -310,7 +329,19 @@ if (!window.google.maps) window.google.maps = {};
           scriptElement.src = MAPS_API_BASE_URL + "?" + urlParams.toString();
-          window.__googleMapsCallback__ = resolve;
+          window.__googleMapsCallback__ = function () {
+            _this2.loadingStatus = APILoadingStatus.LOADED;
+            onLoadingStatusChange(_this2.loadingStatus);
+            resolve();
+          };
+          window.gm_authFailure = function () {
+            _this2.loadingStatus = APILoadingStatus.AUTH_FAILURE;
+            onLoadingStatusChange(_this2.loadingStatus);
+          };
           scriptElement.onerror = function () {
-            return reject(new Error('The Google Maps JavaScript API could not load.'));
+            _this2.loadingStatus = APILoadingStatus.FAILED;
+            onLoadingStatusChange(_this2.loadingStatus);
+            reject(new Error('The Google Maps JavaScript API could not load.'));
           };
           scriptElement.nonce = ((_document$querySelect = document.querySelector('script[nonce]')) == null ? void 0 : _document$querySelect.nonce) || '';
+          _this2.loadingStatus = APILoadingStatus.LOADING;
+          onLoadingStatusChange(_this2.loadingStatus);
           document.head.append(scriptElement);
@@ -320,3 +351,3 @@ });
       };
-      // for the first load we declare an importLibrary function that will
+      // for the first load, we declare an importLibrary function that will
       // be overwritten once the api is loaded.
@@ -331,2 +362,4 @@ google.maps.importLibrary = function (libraryName) {
   }();
+  GoogleMapsApiLoader.loadingStatus = APILoadingStatus.NOT_LOADED;
+  GoogleMapsApiLoader.serializedApiParams = void 0;
 
@@ -488,3 +521,6 @@ var _iteratorSymbol = typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
     }, check);
-  }
+  } /**
+     * local hook to set up the map-instance management context.
+     */
+
   function _catch(body, recover) {
@@ -501,18 +537,3 @@ try {
   }
-  exports.APILoadingStatus = void 0;
-  (function (APILoadingStatus) {
-    APILoadingStatus["NOT_LOADED"] = "NOT_LOADED";
-    APILoadingStatus["LOADING"] = "LOADING";
-    APILoadingStatus["LOADED"] = "LOADED";
-    APILoadingStatus["FAILED"] = "FAILED";
-  })(exports.APILoadingStatus || (exports.APILoadingStatus = {}));
-  var _APILoadingStatus = exports.APILoadingStatus,
-    NOT_LOADED = _APILoadingStatus.NOT_LOADED,
-    LOADING = _APILoadingStatus.LOADING,
-    LOADED = _APILoadingStatus.LOADED,
-    FAILED = _APILoadingStatus.FAILED;
   var APIProviderContext = React__default["default"].createContext(null);
-  /**
-   * local hook to manage access to map-instances.
-   */
   function useMapInstances() {
@@ -561,3 +582,3 @@ var _useState = React.useState({}),
       otherApiParams = _objectWithoutPropertiesLoose(props, _excluded$4);
-    var _useState2 = React.useState(NOT_LOADED),
+    var _useState2 = React.useState(GoogleMapsApiLoader.loadingStatus),
       status = _useState2[0],
@@ -598,3 +619,2 @@ setStatus = _useState2[1];
     React.useEffect(function () {
-      setStatus(LOADING);
       (function () {
@@ -606,3 +626,5 @@ try {
               libraries: librariesString
-            }, otherApiParams))).then(function () {
+            }, otherApiParams), function (status) {
+              return setStatus(status);
+            })).then(function () {
               function _temp2() {
@@ -613,3 +635,2 @@ if (onLoad) {
               }
-              setStatus(LOADED);
               var _temp = _forOf(['core', 'maps'].concat(libraries), function (name) {
@@ -622,3 +643,2 @@ return Promise.resolve(importLibrary(name)).then(function () {});
             console.error('<ApiProvider> failed to load Google Maps API', error);
-            setStatus(FAILED);
           });
@@ -669,3 +689,3 @@ return _temp3 && _temp3.then ? _temp3.then(function () {}) : void 0;
     var _useContext;
-    return ((_useContext = React.useContext(APIProviderContext)) == null ? void 0 : _useContext.status) || exports.APILoadingStatus.NOT_LOADED;
+    return ((_useContext = React.useContext(APIProviderContext)) == null ? void 0 : _useContext.status) || APILoadingStatus.NOT_LOADED;
   }
@@ -678,3 +698,3 @@
     var status = useApiLoadingStatus();
-    return status === exports.APILoadingStatus.LOADED;
+    return status === APILoadingStatus.LOADED;
   }
@@ -755,3 +775,3 @@
         if (!handler) return;
-        var listener = map.addListener(eventType, function (ev) {
+        var listener = google.maps.event.addListener(map, eventType, function (ev) {
           var mapEvent = createMapEvent(eventType, map, ev);
@@ -990,2 +1010,3 @@ trackDispatchedEvent(mapEvent, cameraStateRef);
     var context = React.useContext(APIProviderContext);
+    var loadingStatus = useApiLoadingStatus();
     if (!context) {
@@ -1012,2 +1033,10 @@ throw new Error('<Map> can only be used inside an <ApiProvider> component.');
     }, [style, isViewportSet]);
+    if (loadingStatus === APILoadingStatus.AUTH_FAILURE) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        style: _extends({
+          position: 'relative'
+        }, className ? {} : combinedStyle),
+        className: className
+      }, /*#__PURE__*/React__default["default"].createElement(AuthFailureMessage, null));
+    }
     return /*#__PURE__*/React__default["default"].createElement("div", _extends({
@@ -1027,2 +1056,23 @@ ref: mapRef,
   Map.deckGLViewProps = true;
+  var AuthFailureMessage = function AuthFailureMessage() {
+    var style = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      zIndex: 999,
+      display: 'flex',
+      flexFlow: 'column nowrap',
+      textAlign: 'center',
+      justifyContent: 'center',
+      fontSize: '.8rem',
+      color: 'rgba(0,0,0,0.6)',
+      background: '#dddddd',
+      padding: '1rem 1.5rem'
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement("h2", null, "Error: AuthFailure"), /*#__PURE__*/React__default["default"].createElement("p", null, "A problem with your API key prevents the map from rendering correctly. Please make sure the value of the ", /*#__PURE__*/React__default["default"].createElement("code", null, "APIProvider.apiKey"), " prop is correct. Check the error-message in the console for further details."));
+  };
   /**
@@ -1142,12 +1192,13 @@ * The main hook takes care of creating map-instances and registering them in
       if (!marker) return;
-      var m = marker;
-      if (onClick) marker.addListener('click', onClick);
-      if (onDrag) marker.addListener('drag', onDrag);
-      if (onDragStart) marker.addListener('dragstart', onDragStart);
-      if (onDragEnd) marker.addListener('dragend', onDragEnd);
+      var gme = google.maps.event;
+      if (onClick) gme.addListener(marker, 'click', onClick);
+      if (onDrag) gme.addListener(marker, 'drag', onDrag);
+      if (onDragStart) gme.addListener(marker, 'dragstart', onDragStart);
+      if (onDragEnd) gme.addListener(marker, 'dragend', onDragEnd);
       if ((onDrag || onDragStart || onDragEnd) && !draggable) {
         console.warn('You need to set the marker to draggable to listen to drag-events.');
       }
+      var m = marker;
       return function () {
-        google.maps.event.clearInstanceListeners(m);
+        gme.clearInstanceListeners(m);
       };
@@ -1219,3 +1270,3 @@ }, [marker, draggable, onClick, onDragStart, onDrag, onDragEnd]);
       if (onCloseClick) {
-        infoWindow.addListener('closeclick', function () {
+        google.maps.event.addListener(infoWindow, 'closeclick', function () {
           onCloseClick();
@@ -1350,11 +1401,12 @@ });
       // Add event listeners
-      if (onClick) m.addListener('click', onClick);
-      if (onDrag) m.addListener('drag', onDrag);
-      if (onDragStart) m.addListener('dragstart', onDragStart);
-      if (onDragEnd) m.addListener('dragend', onDragEnd);
-      if (onMouseOver) m.addListener('mouseover', onMouseOver);
-      if (onMouseOut) m.addListener('mouseout', onMouseOut);
+      var gme = google.maps.event;
+      if (onClick) gme.addListener(m, 'click', onClick);
+      if (onDrag) gme.addListener(m, 'drag', onDrag);
+      if (onDragStart) gme.addListener(m, 'dragstart', onDragStart);
+      if (onDragEnd) gme.addListener(m, 'dragend', onDragEnd);
+      if (onMouseOver) gme.addListener(m, 'mouseover', onMouseOver);
+      if (onMouseOut) gme.addListener(m, 'mouseout', onMouseOut);
       marker.setDraggable(Boolean(draggable));
       return function () {
-        google.maps.event.clearInstanceListeners(m);
+        gme.clearInstanceListeners(m);
       };
@@ -1361,0 +1413,0 @@ }, [marker, draggable, onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut]);

dist/libraries/google-maps-api-loader.d.ts

@@ -0,1 +1,2 @@
+import { APILoadingStatus } from './api-loading-status';
 export type ApiParams = {
@@ -13,3 +14,3 @@ key: string;
         __googleMapsCallback__?: () => void;
-        __googleMapsApiParams__?: string;
+        gm_authFailure?: () => void;
     }
@@ -24,5 +25,7 @@ }
 export declare class GoogleMapsApiLoader {
+    static loadingStatus: APILoadingStatus;
+    static serializedApiParams?: string;
     /**
      * Loads the Google Maps API with the specified parameters.
-     * Since the maps library can only be loaded once per page, this will
+     * Since the Maps library can only be loaded once per page, this will
      * produce a warning when called multiple times with different
@@ -33,7 +36,6 @@ * parameters.
      * and rejects in case of an error or when the loading was aborted.
-     * @param params
      */
-    static load(params: ApiParams): Promise<void>;
+    static load(params: ApiParams, onLoadingStatusChange: (status: APILoadingStatus) => void): Promise<void>;
     private static serializeParams;
     private static initImportLibrary;
 }

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "React components and hooks for Google Maps.",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

README.md

 > [!IMPORTANT]
 > This project is still in it's alpha phase.
-> 
+>
 > When using it be aware that things may not yet work as expected and can
@@ -8,13 +8,14 @@ > break at any point. Releases happen often, so when you experience problems,
 > your project) before opening an issue.
-> 
+>
 > We are still in a phase where we can easily make bigger changes, so we ask
 > you to please [provide feedback](https://github.com/visgl/react-google-maps/issues/new)
 > on everything you notice - including, but not limited to
->  - developer experience (installation, typings, sourcemaps, framework integration, ...)
->  - hard to understand concepts and APIs
->  - wrong, missing, outdated or inaccurate documentation
->  - use-cases not covered by the API
->  - missing features
->  - and of course any bugs you encounter
-> 
+>
+> - developer experience (installation, typings, sourcemaps, framework integration, ...)
+> - hard to understand concepts and APIs
+> - wrong, missing, outdated or inaccurate documentation
+> - use-cases not covered by the API
+> - missing features
+> - and of course any bugs you encounter
+>
 > Also, feel free to use [GitHub discussions](https://github.com/visgl/react-google-maps/discussions) to ask questions or start a new
@@ -41,2 +42,5 @@ > discussion.
 
+_(PowerShell users: since `@` has a special meaning in PowerShell, the
+package name has to be quoted)_
+
 ## Usage
@@ -43,0 +47,0 @@

src/components/map/use-map-events.ts

@@ -66,3 +66,4 @@ import {useEffect} from 'react';
 
-      const listener = map.addListener(
+      const listener = google.maps.event.addListener(
+        map,
         eventType,
@@ -69,0 +70,0 @@ (ev?: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {

src/hooks/use-api-is-loaded.ts

@@ -1,3 +0,3 @@
-import {APILoadingStatus} from '../components/api-provider';
 import {useApiLoadingStatus} from './use-api-loading-status';
+import {APILoadingStatus} from '../libraries/api-loading-status';
 /**
@@ -4,0 +4,0 @@ * Hook to check if the Google Maps API is loaded

src/hooks/use-api-loading-status.ts

 import {useContext} from 'react';
-import {APILoadingStatus, APIProviderContext} from '../components/api-provider';
+import {APIProviderContext} from '../components/api-provider';
+import {APILoadingStatus} from '../libraries/api-loading-status';
 
@@ -4,0 +5,0 @@ export function useApiLoadingStatus(): APILoadingStatus {

src/libraries/__mocks__/google-maps-api-loader.ts

@@ -5,8 +5,13 @@ import type {GoogleMapsApiLoader as ActualLoader} from '../google-maps-api-loader';
 import {importLibraryMock} from './lib/import-library-mock';
+import {APILoadingStatus} from '../api-loading-status';
 
 export class GoogleMapsApiLoader {
-  static load: typeof ActualLoader.load = jest.fn(() => {
-    google.maps.importLibrary = importLibraryMock;
-    return Promise.resolve();
-  });
+  static loadingStatus: APILoadingStatus = APILoadingStatus.LOADED;
+  static load: typeof ActualLoader.load = jest.fn(
+    (_, onLoadingStatusChange) => {
+      google.maps.importLibrary = importLibraryMock;
+      onLoadingStatusChange(APILoadingStatus.LOADED);
+      return Promise.resolve();
+    }
+  );
 }

src/libraries/google-maps-api-loader.ts

@@ -0,1 +1,3 @@
+import {APILoadingStatus} from './api-loading-status';
+
 export type ApiParams = {
@@ -15,3 +17,3 @@ key: string;
     __googleMapsCallback__?: () => void;
-    __googleMapsApiParams__?: string;
+    gm_authFailure?: () => void;
   }
@@ -29,5 +31,8 @@ }
 export class GoogleMapsApiLoader {
+  public static loadingStatus: APILoadingStatus = APILoadingStatus.NOT_LOADED;
+  public static serializedApiParams?: string;
+
   /**
    * Loads the Google Maps API with the specified parameters.
-   * Since the maps library can only be loaded once per page, this will
+   * Since the Maps library can only be loaded once per page, this will
    * produce a warning when called multiple times with different
@@ -38,16 +43,31 @@ * parameters.
    * and rejects in case of an error or when the loading was aborted.
-   * @param params
    */
-  static async load(params: ApiParams): Promise<void> {
+  static async load(
+    params: ApiParams,
+    onLoadingStatusChange: (status: APILoadingStatus) => void
+  ): Promise<void> {
     const libraries = params.libraries ? params.libraries.split(',') : [];
     const serializedParams = this.serializeParams(params);
 
+    // note: if google.maps.importLibrary was defined externally, the params
+    //   will be ignored. If it was defined by a previous call to this
+    //   method, we will check that the key and other parameters have not been
+    //   changed in between calls.
+
     if (!window.google?.maps?.importLibrary) {
-      window.__googleMapsApiParams__ = serializedParams;
-      this.initImportLibrary(params);
+      this.serializedApiParams = serializedParams;
+      this.initImportLibrary(params, onLoadingStatusChange);
+    } else {
+      // if serializedApiParams isn't defined the library was loaded externally
+      // and we can only assume that went alright.
+      if (!this.serializedApiParams) {
+        this.loadingStatus = APILoadingStatus.LOADED;
+      }
+
+      onLoadingStatusChange(this.loadingStatus);
     }
 
     if (
-      window.__googleMapsApiParams__ &&
-      window.__googleMapsApiParams__ !== serializedParams
+      this.serializedApiParams &&
+      this.serializedApiParams !== serializedParams
     ) {
@@ -77,3 +97,6 @@ console.warn(
 
-  private static initImportLibrary(params: ApiParams) {
+  private static initImportLibrary(
+    params: ApiParams,
+    onLoadingStatusChange: (status: APILoadingStatus) => void
+  ) {
     if (!window.google) window.google = {} as never;
@@ -108,6 +131,19 @@ if (!window.google.maps) window.google.maps = {} as never;
 
-        window.__googleMapsCallback__ = resolve;
+        window.__googleMapsCallback__ = () => {
+          this.loadingStatus = APILoadingStatus.LOADED;
+          onLoadingStatusChange(this.loadingStatus);
+          resolve();
+        };
 
-        scriptElement.onerror = () =>
+        window.gm_authFailure = () => {
+          this.loadingStatus = APILoadingStatus.AUTH_FAILURE;
+          onLoadingStatusChange(this.loadingStatus);
+        };
+
+        scriptElement.onerror = () => {
+          this.loadingStatus = APILoadingStatus.FAILED;
+          onLoadingStatusChange(this.loadingStatus);
           reject(new Error('The Google Maps JavaScript API could not load.'));
+        };
+
         scriptElement.nonce =
@@ -117,2 +153,4 @@ (document.querySelector('script[nonce]') as HTMLScriptElement)
 
+        this.loadingStatus = APILoadingStatus.LOADING;
+        onLoadingStatusChange(this.loadingStatus);
         document.head.append(scriptElement);
@@ -124,3 +162,3 @@ });
 
-    // for the first load we declare an importLibrary function that will
+    // for the first load, we declare an importLibrary function that will
     // be overwritten once the api is loaded.
@@ -127,0 +165,0 @@ google.maps.importLibrary = libraryName =>

No alert changes

Improved metrics

Total package byte prevSize

439011

increased by4.71%

Number of package files

83

increased by2.47%

Lines of code

6089

increased by3.57%

Number of lines in readme file

134

increased by3.08%

No dependency changes