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

Comparing version 0.8.3 to 0.9.0

dist/components/advanced-marker.d.ts

@@ -14,3 +14,3 @@ /// <reference types="google.maps" />
 };
-export type AdvancedMarkerProps = PropsWithChildren<Omit<google.maps.marker.AdvancedMarkerElementOptions, 'gmpDraggable'> & AdvancedMarkerEventProps & {
+export type AdvancedMarkerProps = PropsWithChildren<Omit<google.maps.marker.AdvancedMarkerElementOptions, 'gmpDraggable' | 'map'> & AdvancedMarkerEventProps & {
     /**
@@ -24,3 +24,3 @@ * className to add a class to the advanced marker element
 export type AdvancedMarkerRef = google.maps.marker.AdvancedMarkerElement | null;
-export declare const AdvancedMarker: React.ForwardRefExoticComponent<Omit<google.maps.marker.AdvancedMarkerElementOptions, "gmpDraggable"> & AdvancedMarkerEventProps & {
+export declare const AdvancedMarker: React.ForwardRefExoticComponent<Omit<google.maps.marker.AdvancedMarkerElementOptions, "gmpDraggable" | "map"> & AdvancedMarkerEventProps & {
     /**
@@ -27,0 +27,0 @@ * className to add a class to the advanced marker element

dist/components/marker.d.ts

@@ -12,3 +12,3 @@ /// <reference types="google.maps" />
 };
-export type MarkerProps = google.maps.MarkerOptions & MarkerEventProps;
+export type MarkerProps = Omit<google.maps.MarkerOptions, 'map'> & MarkerEventProps;
 export type MarkerRef = Ref<google.maps.Marker | null>;
@@ -18,4 +18,4 @@ /**
  */
-export declare const Marker: React.ForwardRefExoticComponent<google.maps.MarkerOptions & MarkerEventProps & React.RefAttributes<google.maps.Marker>>;
+export declare const Marker: React.ForwardRefExoticComponent<Omit<google.maps.MarkerOptions, "map"> & MarkerEventProps & React.RefAttributes<google.maps.Marker>>;
 export declare function useMarkerRef(): readonly [(m: google.maps.Marker | null) => void, google.maps.Marker | null];
 export {};

dist/index.umd.js

@@ -952,2 +952,7 @@ (function (global, factory) {
       mapOptions = _objectWithoutPropertiesLoose(props, _excluded$2);
+    var hasZoom = props.zoom !== undefined || props.defaultZoom !== undefined;
+    var hasCenter = props.center !== undefined || props.defaultCenter !== undefined;
+    if (!defaultBounds && (!hasZoom || !hasCenter)) {
+      console.warn('<Map> component is missing configuration. ' + 'You have to provide zoom and center (via the `zoom`/`defaultZoom` and ' + '`center`/`defaultCenter` props) or specify the region to show using ' + '`defaultBounds`. See ' + 'https://visgl.github.io/react-google-maps/docs/api-reference/components/map#required');
+    }
     // apply default camera props if available and not overwritten by controlled props
@@ -975,2 +980,11 @@ if (!mapOptions.center && defaultCenter) mapOptions.center = defaultCenter;
       }
+      // prevent map not rendering due to missing configuration
+      else if (!hasZoom || !hasCenter) {
+        newMap.fitBounds({
+          east: 180,
+          west: -180,
+          south: -90,
+          north: 90
+        });
+      }
       // the savedMapState is used to restore the camera parameters when the mapId is changed
@@ -1116,2 +1130,38 @@ if (savedMapStateRef.current) {
 
+  var shownMessages = new Set();
+  function logErrorOnce() {
+    var args = [].slice.call(arguments);
+    var key = JSON.stringify(args);
+    if (!shownMessages.has(key)) {
+      var _console;
+      shownMessages.add(key);
+      (_console = console).error.apply(_console, args);
+    }
+  }
+
+  /**
+   * Retrieves a map-instance from the context. This is either an instance
+   * identified by id or the parent map instance if no id is specified.
+   * Returns null if neither can be found.
+   */
+  var useMap = function useMap(id) {
+    if (id === void 0) {
+      id = null;
+    }
+    var ctx = React.useContext(APIProviderContext);
+    var _ref = React.useContext(GoogleMapsContext) || {},
+      map = _ref.map;
+    if (ctx === null) {
+      logErrorOnce('useMap(): failed to retrieve APIProviderContext. ' + 'Make sure that the <APIProvider> component exists and that the ' + 'component you are calling `useMap()` from is a sibling of the ' + '<APIProvider>.');
+      return null;
+    }
+    var mapInstances = ctx.mapInstances;
+    // if an id is specified, the corresponding map or null is returned
+    if (id !== null) return mapInstances[id] || null;
+    // otherwise, return the closest ancestor
+    if (map) return map;
+    // finally, return the default map instance
+    return mapInstances['default'] || null;
+  };
+
   function useMapsLibrary(name) {
@@ -1133,3 +1183,2 @@ var apiIsLoaded = useApiIsLoaded();
   function useAdvancedMarker(props) {
-    var _useContext;
     var _useState = React.useState(null),
@@ -1141,3 +1190,3 @@ marker = _useState[0],
       setContentContainer = _useState2[1];
-    var map = (_useContext = React.useContext(GoogleMapsContext)) == null ? void 0 : _useContext.map;
+    var map = useMap();
     var markerLibrary = useMapsLibrary('marker');
@@ -1247,3 +1296,2 @@ var children = props.children,
   var InfoWindow = function InfoWindow(props) {
-    var _useContext;
     var children = props.children,
@@ -1254,3 +1302,3 @@ anchor = props.anchor,
       infoWindowOptions = _objectWithoutPropertiesLoose(props, _excluded$1);
-    var map = (_useContext = React.useContext(GoogleMapsContext)) == null ? void 0 : _useContext.map;
+    var map = useMap();
     var infoWindowRef = React.useRef(null);
@@ -1318,39 +1366,3 @@ var _useState = React.useState(null),
 
-  var shownMessages = new Set();
-  function logErrorOnce() {
-    var args = [].slice.call(arguments);
-    var key = JSON.stringify(args);
-    if (!shownMessages.has(key)) {
-      var _console;
-      shownMessages.add(key);
-      (_console = console).error.apply(_console, args);
-    }
-  }
-
   /**
-   * Retrieves a map-instance from the context. This is either an instance
-   * identified by id or the parent map instance if no id is specified.
-   * Returns null if neither can be found.
-   */
-  var useMap = function useMap(id) {
-    if (id === void 0) {
-      id = null;
-    }
-    var ctx = React.useContext(APIProviderContext);
-    var _ref = React.useContext(GoogleMapsContext) || {},
-      map = _ref.map;
-    if (ctx === null) {
-      logErrorOnce('useMap(): failed to retrieve APIProviderContext. ' + 'Make sure that the <APIProvider> component exists and that the ' + 'component you are calling `useMap()` from is a sibling of the ' + '<APIProvider>.');
-      return null;
-    }
-    var mapInstances = ctx.mapInstances;
-    // if an id is specified, the corresponding map or null is returned
-    if (id !== null) return mapInstances[id] || null;
-    // otherwise, return the closest ancestor
-    if (map) return map;
-    // finally, return the default map instance
-    return mapInstances['default'] || null;
-  };
-
-  /**
    * Copy of the `google.maps.ControlPosition` constants.
@@ -1414,7 +1426,6 @@ * They have to be duplicated here since we can't wait for the maps API to load to be able to use them.
   function useMarker(props) {
-    var _useContext;
     var _useState = React.useState(null),
       marker = _useState[0],
       setMarker = _useState[1];
-    var map = (_useContext = React.useContext(GoogleMapsContext)) == null ? void 0 : _useContext.map;
+    var map = useMap();
     var onClick = props.onClick,
@@ -1421,0 +1432,0 @@ onDrag = props.onDrag,

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "React components and hooks for Google Maps.",
@@ -63,3 +63,3 @@ "source": "src/index.ts",
     "@testing-library/jest-dom": "^6.0.1",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.2",
     "@testing-library/user-event": "^14.4.3",
@@ -66,0 +66,0 @@ "@types/jest": "^29.4.0",

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

@@ -46,2 +46,16 @@ import {Ref, useEffect, useRef, useState} from 'react';
 
+  const hasZoom = props.zoom !== undefined || props.defaultZoom !== undefined;
+  const hasCenter =
+    props.center !== undefined || props.defaultCenter !== undefined;
+
+  if (!defaultBounds && (!hasZoom || !hasCenter)) {
+    console.warn(
+      '<Map> component is missing configuration. ' +
+        'You have to provide zoom and center (via the `zoom`/`defaultZoom` and ' +
+        '`center`/`defaultCenter` props) or specify the region to show using ' +
+        '`defaultBounds`. See ' +
+        'https://visgl.github.io/react-google-maps/docs/api-reference/components/map#required'
+    );
+  }
+
   // apply default camera props if available and not overwritten by controlled props
@@ -80,2 +94,7 @@ if (!mapOptions.center && defaultCenter) mapOptions.center = defaultCenter;
 
+      // prevent map not rendering due to missing configuration
+      else if (!hasZoom || !hasCenter) {
+        newMap.fitBounds({east: 180, west: -180, south: -90, north: 90});
+      }
+
       // the savedMapState is used to restore the camera parameters when the mapId is changed
@@ -82,0 +101,0 @@ if (savedMapStateRef.current) {

No alert changes

Improved metrics

Total package byte prevSize

468868

increased by1.6%

Lines of code

6369

increased by1.27%

No dependency changes