google-maps-js-api-react - npm Package Compare versions

Comparing version 3.3.0 to 4.0.0

Circle/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type CircleProps = ComponentProps<typeof Circle>;
-declare const Circle: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps } from '../types-6fqaupRi.js';
+
+type CircleProps = ComponentProps<typeof Circle>;
+declare const Circle: react.ForwardRefExoticComponent<Partial<{
     onCenterChanged: (this: google.maps.Circle, center: google.maps.LatLng) => void;
@@ -25,5 +29,4 @@ onRadiusChanged: (this: google.maps.Circle, radius: number) => void;
     visible: boolean;
-} & {
-    defaultOptions: google.maps.CircleOptions;
-}> & import("react").RefAttributes<google.maps.Circle>>;
-export default Circle;
+} & CommonProps<google.maps.Circle>> & react.RefAttributes<google.maps.Circle>>;
+
+export { type CircleProps, Circle as default };

Circle/index.js

@@ -1,3 +0,3 @@
-export { Circle_default as default } from '../chunk-VZU6MSC7.js';
+export { Circle_default as default } from '../_chunks/chunk-3B5RUAO5.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

DrawingManager/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type DrawingManagerProps = ComponentProps<typeof DrawingManager>;
-declare const DrawingManager: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps, P as PreventLoadProps } from '../types-6fqaupRi.js';
+
+type DrawingManagerProps = ComponentProps<typeof DrawingManager>;
+declare const DrawingManager: react.ForwardRefExoticComponent<Partial<{
     onCircleComplete: (this: google.maps.drawing.DrawingManager, circle: google.maps.Circle) => void;
@@ -13,5 +17,4 @@ onMarkerComplete: (this: google.maps.drawing.DrawingManager, marker: google.maps.Marker) => void;
     drawingMode: NonNullable<google.maps.drawing.OverlayType | null>;
-} & {
-    defaultOptions: google.maps.drawing.DrawingManagerOptions;
-}> & import("react").RefAttributes<google.maps.drawing.DrawingManager>>;
-export default DrawingManager;
+} & CommonProps<google.maps.drawing.DrawingManager>> & PreventLoadProps & react.RefAttributes<google.maps.drawing.DrawingManager>>;
+
+export { type DrawingManagerProps, DrawingManager as default };

DrawingManager/index.js

@@ -1,3 +0,3 @@
-export { DrawingManager_default as default } from '../chunk-5623TAY3.js';
+export { DrawingManager_default as default } from '../_chunks/chunk-EJKF3R6N.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

GoogleMap/index.d.ts

 /// <reference types="google.maps" />
-import { CSSProperties, ComponentProps } from 'react';
-export type GoogleMapProps = ComponentProps<typeof GoogleMap>;
-declare const GoogleMap: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps, SuspenseProps } from 'react';
+import { C as CommonProps, P as PreventLoadProps } from '../types-6fqaupRi.js';
+
+type GoogleMapProps = ComponentProps<typeof GoogleMap>;
+declare const GoogleMap: react.ForwardRefExoticComponent<Partial<{
     onBoundsChanged: (this: google.maps.Map, bounds: google.maps.LatLngBounds) => void;
@@ -20,8 +24,8 @@ onCenterChanged: (this: google.maps.Map, center: google.maps.LatLng) => void;
     onContextMenu: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
+    onDblClick: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
     onMouseDown: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
+    onMouseUp: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
     onMouseMove: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
     onMouseOut: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
     onMouseOver: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
-    onMouseUp: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
-    onDblClick: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
     onRightClick: (this: google.maps.Map, e: google.maps.MapMouseEvent) => void;
@@ -35,10 +39,6 @@ } & {
     zoom: number;
-} & {
-    defaultOptions: google.maps.MapOptions;
-}> & {
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<google.maps.Map>>;
-export default GoogleMap;
+} & CommonProps<google.maps.Map>> & Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "id"> & Pick<SuspenseProps, "fallback"> & PreventLoadProps & {
+    children?: react.ReactNode;
+} & react.RefAttributes<google.maps.Map>>;
+
+export { type GoogleMapProps, GoogleMap as default };

GoogleMap/index.js

@@ -1,3 +0,3 @@
-export { GoogleMap_default as default } from '../chunk-UEWNU2DT.js';
+export { GoogleMap_default as default } from '../_chunks/chunk-DJNXEGGO.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

HeatmapLayer/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type HeatmapLayerProps = ComponentProps<typeof HeatmapLayer>;
-declare const HeatmapLayer: import("react").ForwardRefExoticComponent<Partial<{} & {
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps, P as PreventLoadProps } from '../types-6fqaupRi.js';
+
+type HeatmapLayerProps = ComponentProps<typeof HeatmapLayer>;
+declare const HeatmapLayer: react.ForwardRefExoticComponent<Partial<{} & {
     data: NonNullable<google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation> | (google.maps.LatLng | google.maps.visualization.WeightedLocation)[]>;
-} & {
-    defaultOptions: google.maps.visualization.HeatmapLayerOptions;
-}> & import("react").RefAttributes<google.maps.visualization.HeatmapLayer>>;
-export default HeatmapLayer;
+} & CommonProps<google.maps.visualization.HeatmapLayer>> & PreventLoadProps & react.RefAttributes<google.maps.visualization.HeatmapLayer>>;
+
+export { type HeatmapLayerProps, HeatmapLayer as default };

HeatmapLayer/index.js

@@ -1,3 +0,3 @@
-export { HeatmapLayer_default as default } from '../chunk-LHNNYYNR.js';
+export { HeatmapLayer_default as default } from '../_chunks/chunk-3NG5EBTM.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

index.d.ts

@@ -1,18 +0,19 @@
-export { default as Circle, type CircleProps } from './Circle';
-export { default as DrawingManager, type DrawingManagerProps, } from './DrawingManager';
-export { default as GoogleMap, type GoogleMapProps } from './GoogleMap';
-export { default as HeatmapLayer, type HeatmapLayerProps, } from './HeatmapLayer';
-export { default as Marker, type MarkerProps } from './Marker';
-export { default as Polygon, type PolygonProps } from './Polygon';
-export { default as Polyline, type PolylineProps } from './Polyline';
-export { default as Rectangle, type RectangleProps } from './Rectangle';
-export { default as OverlayView, type OverlayViewProps } from './OverlayView';
-export { default as useGoogleMap } from './useGoogleMap';
-export { default as useAutocompleteService } from './useAutocompleteService';
-export { default as useDirectionService } from './useDirectionService';
-export { default as useDistanceMatrixService } from './useDistanceMatrixService';
-export { default as useElevationService } from './useElevationService';
-export { default as useGeocoder } from './useGeocoder';
-export { default as useMaxZoomService } from './useMaxZoomService';
-export { default as usePlacesService } from './usePlacesService';
-export { default as useStreetViewService } from './useStreetViewService';
+/// <reference types="google.maps" />
+
+export { default as Circle, CircleProps } from './Circle/index.js';
+export { default as DrawingManager, DrawingManagerProps } from './DrawingManager/index.js';
+export { default as GoogleMap, GoogleMapProps } from './GoogleMap/index.js';
+export { default as HeatmapLayer, HeatmapLayerProps } from './HeatmapLayer/index.js';
+export { default as Marker, MarkerProps } from './Marker/index.js';
+export { default as Polygon, PolygonProps } from './Polygon/index.js';
+export { default as Polyline, PolylineProps } from './Polyline/index.js';
+export { default as Rectangle, RectangleProps } from './Rectangle/index.js';
+export { default as OverlayView, OverlayViewProps } from './OverlayView/index.js';
+export { default as useGoogleMap } from './useGoogleMap/index.js';
+export { default as usePane } from './usePane/index.js';
+export { default as useGoogleMapsCompletion } from './useGoogleMapsCompletion/index.js';
+export { default as useGoogleMapsLoad } from './useGoogleMapsLoad/index.js';
+export { default as useGoogleMapsStatus } from './useGoogleMapsStatus/index.js';
+import 'react';
+import './types-6fqaupRi.js';
+import 'google-maps-js-api-loader';

index.js

@@ -1,20 +0,16 @@
-export { useMaxZoomService_default as useMaxZoomService } from './chunk-HBS5AAQO.js';
-export { usePlacesService_default as usePlacesService } from './chunk-DUZKOCXM.js';
-export { useStreetViewService_default as useStreetViewService } from './chunk-FM25NJB7.js';
-export { Polyline_default as Polyline } from './chunk-S6IJ2YQ2.js';
-export { Rectangle_default as Rectangle } from './chunk-LVNSMBUF.js';
-export { useAutocompleteService_default as useAutocompleteService } from './chunk-QT3C3P3X.js';
-export { useDirectionService_default as useDirectionService } from './chunk-FTNU6MN6.js';
-export { useDistanceMatrixService_default as useDistanceMatrixService } from './chunk-QYIAXOPG.js';
-export { useElevationService_default as useElevationService } from './chunk-GGIT2G6Z.js';
-export { useGeocoder_default as useGeocoder } from './chunk-BTHFS52F.js';
-export { Circle_default as Circle } from './chunk-VZU6MSC7.js';
-export { DrawingManager_default as DrawingManager } from './chunk-5623TAY3.js';
-export { GoogleMap_default as GoogleMap } from './chunk-UEWNU2DT.js';
-export { HeatmapLayer_default as HeatmapLayer } from './chunk-LHNNYYNR.js';
-export { Marker_default as Marker } from './chunk-N5FSOHX7.js';
-export { OverlayView_default as OverlayView } from './chunk-5UIYMR5M.js';
-export { Polygon_default as Polygon } from './chunk-SFU6B2LU.js';
-export { useGoogleMap_default as useGoogleMap } from './chunk-3T53IH2Y.js';
+export { Polyline_default as Polyline } from './_chunks/chunk-YESGHUL7.js';
+export { Rectangle_default as Rectangle } from './_chunks/chunk-VONGOBP4.js';
+export { useGoogleMap_default as useGoogleMap } from './_chunks/chunk-4ES34YHA.js';
+export { useGoogleMapsCompletion_default as useGoogleMapsCompletion } from './_chunks/chunk-4AG74ZIS.js';
+export { useGoogleMapsLoad_default as useGoogleMapsLoad } from './_chunks/chunk-3UKSGO7U.js';
+export { useGoogleMapsStatus_default as useGoogleMapsStatus } from './_chunks/chunk-FN7OQ6OP.js';
+export { usePane_default as usePane } from './_chunks/chunk-QOZICH7A.js';
+export { Circle_default as Circle } from './_chunks/chunk-3B5RUAO5.js';
+export { DrawingManager_default as DrawingManager } from './_chunks/chunk-EJKF3R6N.js';
+export { HeatmapLayer_default as HeatmapLayer } from './_chunks/chunk-3NG5EBTM.js';
+export { GoogleMap_default as GoogleMap } from './_chunks/chunk-DJNXEGGO.js';
+export { OverlayView_default as OverlayView } from './_chunks/chunk-LZXN44ME.js';
+export { Marker_default as Marker } from './_chunks/chunk-PSVYIS6H.js';
+export { Polygon_default as Polygon } from './_chunks/chunk-DV4VSJAC.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

Marker/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type MarkerProps = ComponentProps<typeof Marker>;
-declare const Marker: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps, P as PreventLoadProps } from '../types-6fqaupRi.js';
+
+type MarkerProps = ComponentProps<typeof Marker>;
+declare const Marker: react.ForwardRefExoticComponent<Partial<{
     onAnimationChanged: (this: google.maps.Marker, animation: NonNullable<google.maps.Animation | null | undefined>) => void;
@@ -41,5 +45,4 @@ onClickableChanged: (this: google.maps.Marker, clickable: boolean) => void;
     zIndex: number;
-} & {
-    defaultOptions: google.maps.MarkerOptions;
-}> & import("react").RefAttributes<google.maps.Marker>>;
-export default Marker;
+} & CommonProps<google.maps.Marker>> & PreventLoadProps & react.RefAttributes<google.maps.Marker>>;
+
+export { type MarkerProps, Marker as default };

Marker/index.js

@@ -1,3 +0,3 @@
-export { Marker_default as default } from '../chunk-N5FSOHX7.js';
+export { Marker_default as default } from '../_chunks/chunk-PSVYIS6H.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

OverlayView/index.d.ts

 /// <reference types="google.maps" />
-import { ReactElement, RefAttributes, FC } from 'react';
-export type OverlayViewProps = {
+
+import * as react from 'react';
+import { RefCallback, ReactElement } from 'react';
+
+type OverlayViewProps = {
     /**
+     * Specifies which map pane to use for this overlay.
      * @see [link](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes)
@@ -17,7 +21,11 @@ * @default 'overlayMouseTarget'
     preventMapHits?: boolean;
-    children: ReactElement & RefAttributes<HTMLElement>;
+    /**
+     * [render](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) prop, a function that returns a React element and provides the ability to attach {@link ref} to it
+     */
+    render(ref: RefCallback<HTMLElement>): ReactElement;
     lat: number;
     lng: number;
 };
-declare const OverlayView: FC<OverlayViewProps>;
-export default OverlayView;
+declare const OverlayView: react.ForwardRefExoticComponent<OverlayViewProps & react.RefAttributes<HTMLElement>>;
+
+export { type OverlayViewProps, OverlayView as default };

OverlayView/index.js

@@ -1,3 +0,3 @@
-export { OverlayView_default as default } from '../chunk-5UIYMR5M.js';
+export { OverlayView_default as default } from '../_chunks/chunk-LZXN44ME.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "google-maps-js-api-react",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "author": "Krombik",
@@ -34,6 +34,7 @@ "description": "Fast, tree-shakable, and light-weight React components and hooks for integrating Google Maps API functionality",
   "peerDependencies": {
-    "@types/google.maps": ">=3.0.0",
-    "@types/react": ">=16.8.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "@types/google.maps": ">=3.51.0",
+    "@types/react": ">=18.0.0",
+    "google-maps-js-api-loader": ">=4.0.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
@@ -43,5 +44,9 @@ "peerDependenciesMeta": {
       "optional": true
+    },
+    "@types/google.maps": {
+      "optional": true
     }
   },
   "dependencies": {
+    "keyweaver": "^1.0.0",
     "lodash.noop": "^3.0.1",
@@ -59,3 +64,156 @@ "react-helpful-utils": "^1.0.1"
   "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./index.cjs"
+      },
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    },
+    "./Circle": {
+      "require": {
+        "types": "./Circle/index.d.cts",
+        "default": "./Circle/index.cjs"
+      },
+      "import": {
+        "types": "./Circle/index.d.ts",
+        "default": "./Circle/index.js"
+      }
+    },
+    "./DrawingManager": {
+      "require": {
+        "types": "./DrawingManager/index.d.cts",
+        "default": "./DrawingManager/index.cjs"
+      },
+      "import": {
+        "types": "./DrawingManager/index.d.ts",
+        "default": "./DrawingManager/index.js"
+      }
+    },
+    "./GoogleMap": {
+      "require": {
+        "types": "./GoogleMap/index.d.cts",
+        "default": "./GoogleMap/index.cjs"
+      },
+      "import": {
+        "types": "./GoogleMap/index.d.ts",
+        "default": "./GoogleMap/index.js"
+      }
+    },
+    "./HeatmapLayer": {
+      "require": {
+        "types": "./HeatmapLayer/index.d.cts",
+        "default": "./HeatmapLayer/index.cjs"
+      },
+      "import": {
+        "types": "./HeatmapLayer/index.d.ts",
+        "default": "./HeatmapLayer/index.js"
+      }
+    },
+    "./Marker": {
+      "require": {
+        "types": "./Marker/index.d.cts",
+        "default": "./Marker/index.cjs"
+      },
+      "import": {
+        "types": "./Marker/index.d.ts",
+        "default": "./Marker/index.js"
+      }
+    },
+    "./OverlayView": {
+      "require": {
+        "types": "./OverlayView/index.d.cts",
+        "default": "./OverlayView/index.cjs"
+      },
+      "import": {
+        "types": "./OverlayView/index.d.ts",
+        "default": "./OverlayView/index.js"
+      }
+    },
+    "./Polygon": {
+      "require": {
+        "types": "./Polygon/index.d.cts",
+        "default": "./Polygon/index.cjs"
+      },
+      "import": {
+        "types": "./Polygon/index.d.ts",
+        "default": "./Polygon/index.js"
+      }
+    },
+    "./Polyline": {
+      "require": {
+        "types": "./Polyline/index.d.cts",
+        "default": "./Polyline/index.cjs"
+      },
+      "import": {
+        "types": "./Polyline/index.d.ts",
+        "default": "./Polyline/index.js"
+      }
+    },
+    "./Rectangle": {
+      "require": {
+        "types": "./Rectangle/index.d.cts",
+        "default": "./Rectangle/index.cjs"
+      },
+      "import": {
+        "types": "./Rectangle/index.d.ts",
+        "default": "./Rectangle/index.js"
+      }
+    },
+    "./useGoogleMap": {
+      "require": {
+        "types": "./useGoogleMap/index.d.cts",
+        "default": "./useGoogleMap/index.cjs"
+      },
+      "import": {
+        "types": "./useGoogleMap/index.d.ts",
+        "default": "./useGoogleMap/index.js"
+      }
+    },
+    "./useGoogleMapsCompletion": {
+      "require": {
+        "types": "./useGoogleMapsCompletion/index.d.cts",
+        "default": "./useGoogleMapsCompletion/index.cjs"
+      },
+      "import": {
+        "types": "./useGoogleMapsCompletion/index.d.ts",
+        "default": "./useGoogleMapsCompletion/index.js"
+      }
+    },
+    "./useGoogleMapsLoad": {
+      "require": {
+        "types": "./useGoogleMapsLoad/index.d.cts",
+        "default": "./useGoogleMapsLoad/index.cjs"
+      },
+      "import": {
+        "types": "./useGoogleMapsLoad/index.d.ts",
+        "default": "./useGoogleMapsLoad/index.js"
+      }
+    },
+    "./useGoogleMapsStatus": {
+      "require": {
+        "types": "./useGoogleMapsStatus/index.d.cts",
+        "default": "./useGoogleMapsStatus/index.cjs"
+      },
+      "import": {
+        "types": "./useGoogleMapsStatus/index.d.ts",
+        "default": "./useGoogleMapsStatus/index.js"
+      }
+    },
+    "./usePane": {
+      "require": {
+        "types": "./usePane/index.d.cts",
+        "default": "./usePane/index.cjs"
+      },
+      "import": {
+        "types": "./usePane/index.d.ts",
+        "default": "./usePane/index.js"
+      }
+    }
+  },
   "sideEffects": false
 }

Polygon/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type PolygonProps = ComponentProps<typeof Polygon>;
-declare const Polygon: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps } from '../types-6fqaupRi.js';
+
+type PolygonProps = ComponentProps<typeof Polygon>;
+declare const Polygon: react.ForwardRefExoticComponent<Partial<{
     onClick: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onContextMenu: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
+    onDblClick: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onMouseDown: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
+    onMouseUp: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onMouseMove: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onMouseOut: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onMouseOver: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
-    onMouseUp: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
-    onDblClick: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
     onRightClick: (this: google.maps.Polygon, e: google.maps.PolyMouseEvent) => void;
@@ -22,5 +26,4 @@ onDrag: (this: google.maps.Polygon, e: google.maps.MapMouseEvent) => void;
     visible: boolean;
-} & {
-    defaultOptions: google.maps.PolygonOptions;
-}> & import("react").RefAttributes<google.maps.Polygon>>;
-export default Polygon;
+} & CommonProps<google.maps.Polygon>> & react.RefAttributes<google.maps.Polygon>>;
+
+export { type PolygonProps, Polygon as default };

Polygon/index.js

@@ -1,3 +0,3 @@
-export { Polygon_default as default } from '../chunk-SFU6B2LU.js';
+export { Polygon_default as default } from '../_chunks/chunk-DV4VSJAC.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

Polyline/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type PolylineProps = ComponentProps<typeof Polyline>;
-declare const Polyline: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps } from '../types-6fqaupRi.js';
+
+type PolylineProps = ComponentProps<typeof Polyline>;
+declare const Polyline: react.ForwardRefExoticComponent<Partial<{
     onClick: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onContextMenu: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
+    onDblClick: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onMouseDown: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
+    onMouseUp: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onMouseMove: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onMouseOut: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onMouseOver: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
-    onMouseUp: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
-    onDblClick: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
     onRightClick: (this: google.maps.Polyline, e: google.maps.PolyMouseEvent) => void;
@@ -22,5 +26,4 @@ onDrag: (this: google.maps.Polyline, e: google.maps.MapMouseEvent) => void;
     visible: boolean;
-} & {
-    defaultOptions: google.maps.PolylineOptions;
-}> & import("react").RefAttributes<google.maps.Polyline>>;
-export default Polyline;
+} & CommonProps<google.maps.Polyline>> & react.RefAttributes<google.maps.Polyline>>;
+
+export { type PolylineProps, Polyline as default };

Polyline/index.js

@@ -1,3 +0,3 @@
-export { Polyline_default as default } from '../chunk-S6IJ2YQ2.js';
+export { Polyline_default as default } from '../_chunks/chunk-YESGHUL7.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

README.md

 # google-maps-js-api-react
 
-> This library requires React v16.8 or later.
+> This library use [Suspense](https://react.dev/reference/react/Suspense), so it requires React v18 or later.
 
@@ -12,3 +12,3 @@ This package provides a simple and efficient way to work with the Google Maps API, enabling map-based applications to be built with ease. With minimal setup, Google Maps functionality can be integrated into React applications using the components and hooks provided by this package. The package is designed to be fast, lightweight, and tree-shakeable, providing a performant solution for integrating Google Maps into React applications.
 ```
-npm install --save google-maps-js-api-react && npm install --save-dev @types/google.maps
+npm i --save google-maps-js-api-react google-maps-js-api-loader && npm install --save-dev @types/google.maps
 ```
@@ -19,5 +19,11 @@
 ```
-yarn add google-maps-js-api-react && yarn add @types/google.maps --dev
+yarn add i google-maps-js-api-react google-maps-js-api-loader && yarn add -D @types/google.maps
 ```
 
+or pnpm:
+
+```
+pnpm add i google-maps-js-api-react google-maps-js-api-loader && pnpm add -D @types/google.maps
+```
+
 ---
@@ -29,9 +35,6 @@
 import { GoogleMap, Marker, OverlayView } from 'google-maps-js-api-react';
-import useGoogleMapsLoader, {
-  GoogleMapsLoaderStatus,
-  GoogleMapsLoader,
-} from 'use-google-maps-loader';
+import { GoogleMapsLoader } from 'google-maps-js-api-loader';
 import { useCallback } from 'react';
 
-GoogleMapsLoader({ apiKey: API_KEY, defer: true });
+GoogleMapsLoader({ apiKey: API_KEY }, { defer: true });
 
@@ -43,24 +46,25 @@ const Map = () => {
 
-  if (status === GoogleMapsLoaderStatus.LOADED) {
-    return (
-      <GoogleMap
-        defaultOptions={{
-          center: { lat: -31.56391, lng: 147.154312 },
-          zoom: 6,
-        }}
-      >
-        <Marker
-          position={{ lat: -31.56391, lng: 147.154312 }}
-          onClick={handleClick}
-        />
-        <OverlayView lat={-37.75} lng={145.116667} preventMapHits>
-          <div style={{ background: 'red' }} onClick={handleClick}>
+  return (
+    <GoogleMap
+      defaultOptions={{
+        center: { lat: -31.56391, lng: 147.154312 },
+        zoom: 6,
+      }}
+    >
+      <Marker
+        position={{ lat: -31.56391, lng: 147.154312 }}
+        onClick={handleClick}
+      />
+      <OverlayView
+        lat={-37.75}
+        lng={145.116667}
+        preventMapHits
+        render={(ref) => (
+          <div ref={ref} style={{ background: 'red' }} onClick={handleClick}>
             dot
           </div>
-        </OverlayView>
-      </GoogleMap>
-    );
-  }
-
-  return null;
+        )}
+      />
+    </GoogleMap>
+  );
 };
@@ -95,13 +99,7 @@ ```
   - [useGoogleMap](#usegooglemap)
-  - [useGoogleMapsLoader](#usegooglemapsloader)
+  - [usePane](#usepane)
+  - [useGoogleMapsLoad](#usegooglemapsload)
+  - [useGoogleMapsCompletion](#usegooglemapscompletion)
+  - [useGoogleMapsStatus](#usegooglemapsstatus)
   - [useMarkerCluster](#usemarkercluster)
-  - [Service hooks](#service-hooks)
-    - [useAutocompleteService](#useautocompleteservice)
-    - [useDirectionService](#usedirectionservice)
-    - [useDistanceMatrixService](#usedistancematrixservice)
-    - [useElevationService](#useelevationservice)
-    - [useGeocoder](#usegeocoder)
-    - [useMaxZoomService](#usemaxzoomservice)
-    - [usePlacesService](#useplacesservice)
-    - [useStreetViewService](#usestreetviewservice)
 
@@ -114,2 +112,4 @@ ## Components
 
+> It creates instance of [Map](https://developers.google.com/maps/documentation/javascript/reference/map#Map) only once and will reuse this instance whenever possible, avoiding unnecessary reinitialization
+
 ```ts
@@ -155,2 +155,4 @@ type GoogleMapProps = {
   children?: React.ReactNode;
+  fallback?: React.ReactNode;
+  preventLoad?: boolean;
 };
@@ -172,5 +174,5 @@
   preventMapHits?: boolean;
-  children: React.ReactElement;
   lat: number;
   lng: number;
+  render(ref: React.RefCallback<HTMLElement>): React.ReactElement;
 };
@@ -183,8 +185,8 @@
 
-| Name                         | Description                                                                                                                                                        | Default                |
-| :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- |
-| `mapPaneLayer?`              | see [link](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes)                                                            | `'overlayMouseTarget'` |
-| `preventMapHits?`            | stops click or tap on the element from bubbling up to the map. Use this to prevent the map from triggering `"click"` events                                        | `false`                |
-| `preventMapHitsAndGestures?` | stops click, tap, drag, and wheel events on the element from bubbling up to the map. Use this to prevent map dragging and zooming, as well as map `"click"` events | `false`                |
-| `children`                   | a single child content element. **Needs to be able to hold a ref**                                                                                                 |                        |
+| Name                         | Description                                                                                                                                                                           | Default                |
+| :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------- |
+| `mapPaneLayer?`              | see [link](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes)                                                                               | `'overlayMouseTarget'` |
+| `preventMapHits?`            | stops click or tap on the element from bubbling up to the map. Use this to prevent the map from triggering `"click"` events                                                           | `false`                |
+| `preventMapHitsAndGestures?` | stops click, tap, drag, and wheel events on the element from bubbling up to the map. Use this to prevent map dragging and zooming, as well as map `"click"` events                    | `false`                |
+| `render`                     | [render](https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) prop, a function that returns a React element and provides the ability to attach `ref` to it |                        |
 
@@ -198,5 +200,7 @@ ```jsx
   return (
-    <OverlayView lat={0} lng={0}>
-      <SomeComponent>hi</SomeComponent>
-    </OverlayView>
+    <OverlayView
+      lat={0}
+      lng={0}
+      render={(ref) => <SomeComponent ref={ref}>hi</SomeComponent>}
+    />
   );
@@ -464,2 +468,3 @@ };
   defaultOptions?: google.maps.drawing.DrawingManagerOptions;
+  preventLoad?: boolean;
 };
@@ -484,2 +489,3 @@
   defaultOptions?: google.maps.visualization.HeatmapLayerOptions;
+  preventLoad?: boolean;
 };
@@ -507,36 +513,31 @@
 
-### useGoogleMapsLoader
+### usePane
 
-This hook has been moved to [use-google-maps-loader](https://www.npmjs.com/package/use-google-maps-loader) library
-
----
-
-### useMarkerCluster
-
-This hook has been moved to [use-marker-cluster](https://www.npmjs.com/package/use-marker-cluster) library
-
----
-
-## Service hooks
-
-All hooks below implement google maps services, hooks can be called even if `google.maps` is not loaded yet, but methods themselves cannot be import until `google.maps` is loaded
-
 ```ts
-const { geocode } = useGeocoder(); // throws error if google.maps not loaded yet
+const usePane: (pane: keyof google.maps.MapPanes) => Element;
+```
 
-const geocoder = useGeocoder(); // no error will be throw
+Hook to retrieve a specific pane from [GoogleMap](#googlemap), useful to creating portals
 
-const fn = async () => {
-  await GoogleMapsLoader.completion;
+```tsx
+const ZoomButton = () => {
+  const map = useGoogleMap();
 
-  const res = await geocoder.geocode(someArg);
+  return createPortal(
+    usePane('overlayMouseTarget'),
+    <button
+      onClick={() => {
+        map.setZoom(7);
+      }}
+    >
+      zoom
+    </button>
+  );
 };
-```
 
-### useAutocompleteService
-
-[AutocompleteService](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteService) implementation
-
-```ts
-const useAutocompleteService: () => google.maps.places.AutocompleteService;
+const Map = () => (
+  <GoogleMap>
+    <ZoomButton />
+  </GoogleMap>
+);
 ```
@@ -546,76 +547,60 @@
 
-### useDirectionService
+### useGoogleMapsLoad
 
-[DirectionService](https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsService) implementation
-
 ```ts
-const useDirectionService: () => google.maps.places.DirectionsService;
+const useGoogleMapsLoad: {
+  (): void;
+  <L extends keyof GoogleMapsLibraries>(library: L): GoogleMapsLibraries[L];
+  <const A extends (keyof GoogleMapsLibraries)[]>(
+    ...libraries: A
+  ): {
+    [Index in keyof A]: GoogleMapsLibraries[A[Index]];
+  };
+};
 ```
 
----
+Hook for loading google maps script or specific library/libraries
 
-### useDistanceMatrixService
+> Works only for [Suspense](https://react.dev/reference/react/Suspense) wrapped components
 
-[DistanceMatrixService](https://developers.google.com/maps/documentation/javascript/reference/distance-matrix#DistanceMatrixService) implementation
-
-```ts
-const useDistanceMatrixService: () => google.maps.places.DistanceMatrixService;
-```
-
 ---
 
-### useElevationService
+### useGoogleMapsCompletion
 
-[ElevationService](https://developers.google.com/maps/documentation/javascript/reference/elevation#ElevationService) implementation
-
 ```ts
-const useElevationService: () => google.maps.ElevationService;
+const useGoogleMapsCompletion: {
+  (): void;
+  <L extends GoogleMapsLibrary>(library: L): GoogleMapsLibraries[L];
+  <const A extends GoogleMapsLibrary[]>(
+    ...libraries: A
+  ): {
+    [Index in keyof A]: GoogleMapsLibraries[A[Index]];
+  };
+};
 ```
 
----
+Hook for awaiting loading of google.maps script or specific library/libraries
 
-### useGeocoder
+> Works only for [Suspense](https://react.dev/reference/react/Suspense) wrapped components
 
-[Geocoder](https://developers.google.com/maps/documentation/javascript/reference/geocoder#Geocoder) implementation
-
-```ts
-const useGeocoder: () => google.maps.Geocoder;
-```
-
 ---
 
-### useMaxZoomService
+### useGoogleMapsStatus
 
-[MaxZoomService](https://developers.google.com/maps/documentation/javascript/reference/max-zoom#MaxZoomService) implementation
-
 ```ts
-const useMaxZoomService: () => google.maps.MaxZoomService;
+const useGoogleMapsStatus: (
+  library?: GoogleMapsLibrary
+) => 'none' | 'loading' | 'loaded' | 'error';
 ```
 
----
+Hook for getting status of google.maps script or specific library
 
-### usePlacesService
+> It not provokes loading of script/library
 
-[PlacesService](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlacesService) implementation
-
-```ts
-const usePlacesService: (
-  container?: null | HTMLElement | google.maps.Map | (() => HTMLElement)
-) => google.maps.places.PlacesService;
-```
-
-| Name         | Description                                                                       | Default |
-| :----------- | :-------------------------------------------------------------------------------- | :------ |
-| `container?` | container to render the attributions for the results or function which returns it | `null`  |
-
 ---
 
-### useStreetViewService
+### useMarkerCluster
 
-[StreetViewService](https://developers.google.com/maps/documentation/javascript/reference/street-view-service#StreetViewService) implementation
+This hook has been moved to [use-marker-cluster](https://www.npmjs.com/package/use-marker-cluster) library
 
-```ts
-const useStreetViewService: () => google.maps.StreetViewService;
-```
-
 ---
@@ -622,0 +607,0 @@

Rectangle/index.d.ts

 /// <reference types="google.maps" />
-import type { ComponentProps } from 'react';
-export type RectangleProps = ComponentProps<typeof Rectangle>;
-declare const Rectangle: import("react").ForwardRefExoticComponent<Partial<{
+
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { C as CommonProps } from '../types-6fqaupRi.js';
+
+type RectangleProps = ComponentProps<typeof Rectangle>;
+declare const Rectangle: react.ForwardRefExoticComponent<Partial<{
     onBoundsChanged: (this: google.maps.Rectangle, bounds: google.maps.LatLngBounds) => void;
@@ -23,5 +27,4 @@ onClick: (this: google.maps.Rectangle, e: google.maps.MapMouseEvent) => void;
     visible: boolean;
-} & {
-    defaultOptions: google.maps.RectangleOptions;
-}> & import("react").RefAttributes<google.maps.Rectangle>>;
-export default Rectangle;
+} & CommonProps<google.maps.Rectangle>> & react.RefAttributes<google.maps.Rectangle>>;
+
+export { type RectangleProps, Rectangle as default };

Rectangle/index.js

@@ -1,3 +0,3 @@
-export { Rectangle_default as default } from '../chunk-LVNSMBUF.js';
+export { Rectangle_default as default } from '../_chunks/chunk-VONGOBP4.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

useGoogleMap/index.d.ts

 /// <reference types="google.maps" />
+
 declare const useGoogleMap: () => google.maps.Map;
-export default useGoogleMap;
+
+export { useGoogleMap as default };

useGoogleMap/index.js

@@ -1,3 +0,3 @@
-export { useGoogleMap_default as default } from '../chunk-3T53IH2Y.js';
+export { useGoogleMap_default as default } from '../_chunks/chunk-4ES34YHA.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213999

increased by31.92%

Lines of code

1720

increased by20.87%

Worsened metrics

Dependency count

8

increased by33.33%

Number of package files

179

decreased by-17.13%

Number of lines in readme file

597

decreased by-2.45%

Dependency changes

• + Addedkeyweaver@^1.0.0

• + Addedgoogle-maps-js-api-loader@4.0.3(transitive)

• + Addedkeyweaver@1.0.3(transitive)