3.1.0

README.md

@@ -1,8 +1,24 @@
 # google-maps-js-api-react
 
-> Note: This library requires React v16.8 or later.
+> This library requires React v16.8 or later.
 
-The 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 the package. The package is designed to be fast, lightweight, and tree-shakeable, providing a performant solution for integrating Google Maps into React applications.
+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.
+
+## Installation
+
+using npm:
+
+```
+npm install --save google-maps-js-api-react && npm install --save-dev @types/google.maps
+```
+
+or yarn:
+
+```
+yarn add google-maps-js-api-react && yarn add @types/google.maps --dev
+```
+
+---
 
 ## Example
 
@@ -147,9 +163,6 @@ const GoogleMap: React.ForwardRefExoticComponent<
 ```ts
 type OverlayViewProps = {
   mapPaneLayer?: keyof google.maps.MapPanes;
-  onAdd?(): void;
-  onDraw?(x: number, y: number): void;
-  onRemove?(): void;
   preventMapHitsAndGestures?: boolean;
   preventMapHits?: boolean;
   children: React.ReactElement;
@@ -164,7 +177,7 @@ const OverlayView: FC<OverlayViewProps>;
 
 | Name                         | Description                                                                                                                                                        | Default                |
 | :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------- |
-| `mapPaneLayer?`              | [see](https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes)                                                                 | `'overlayMouseTarget'` |
+| `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**                                                                                                 |                        |

example/src/App.tsx

@@ -1,18 +1,18 @@
 import {
-  LoaderStatus,
-  Loader,
+  GoogleMapsLoaderStatus,
+  GoogleMapsLoader,
   GoogleMap,
   Marker,
   OverlayView,
-  useGoogleMapLoader,
+  useGoogleMapsLoader,
 } from 'google-maps-js-api-react';
 
 import { useRef, VFC } from 'react';
 
 import { useState } from 'react';
 import useMarkerCluster from 'use-marker-cluster';
 
-Loader.setOptions({
+GoogleMapsLoader.setOptions({
   apiKey: '',
   libraries: ['places', 'geometry'],
 });
@@ -77,7 +77,7 @@ const markerStyle = {
 const CGoogleMap = (p: {
   points: { lat: number; lng: number; id: number }[];
 }) => {
-  const status = useGoogleMapLoader();
+  const status = useGoogleMapsLoader();
 
   const [points, setPoints] = useState(randomLocations);
 
@@ -89,7 +89,7 @@ const CGoogleMap = (p: {
 
   const mapRef = useRef<google.maps.Map>(null);
 
-  if (status === LoaderStatus.LOADED)
+  if (status === GoogleMapsLoaderStatus.LOADED)
     return (
       <>
         <button
@@ -165,9 +165,9 @@ const CGoogleMap = (p: {
 // const GoogleMap = createGoogleMapComponent([], []);
 
 const Map = () => {
-  const status = useGoogleMapLoader();
+  const status = useGoogleMapsLoader();
 
-  if (status === LoaderStatus.LOADED)
+  if (status === GoogleMapsLoaderStatus.LOADED)
     return (
       <GoogleMap
         style={mapStyle}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "google-maps-js-api-react",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Fast, tree-shakable, and light-weight React components and hooks for integrating Google Maps API functionality",
   "author": "Krombik",
   "license": "MIT",
@@ -21,10 +21,10 @@
     "build": "ts-node ./scripts/build.mts"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
     "@types/google.maps": ">=3.0.0",
-    "@types/react": ">=16.8.0"
+    "@types/react": ">=16.8.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

src/components/GoogleMap/index.tsx

@@ -3,20 +3,18 @@ import React, {
   ComponentProps,
   PropsWithChildren,
   forwardRef,
-  useState,
 } from 'react';
 import type {
   CombineProps,
   GetValue,
   DragEventName,
   MouseHandlers,
 } from '../../types';
-import noop from '../../utils/noop';
-import PanesContext from '../../context/PanesContext';
 import useConst from '../../utils/useConst';
 import setRef from '../../utils/setRef';
 import MapContext from '../../context/MapContext';
 import useHandlersAndProps from '../../utils/useHandlersAndProps';
+import PanesProvider from '../../providers/PanesProvider';
 
 type Props = CombineProps<
   google.maps.Map,
@@ -67,48 +65,36 @@ export type GoogleMapProps = ComponentProps<typeof GoogleMap>;
 
 const GoogleMap = forwardRef<google.maps.Map, PropsWithChildren<Props>>(
   (props, ref) => {
-    const [panes, setPanes] = useState<google.maps.MapPanes | null>(null);
-
     const { children } = props;
 
     const data = useConst(() => {
-      const t = new google.maps.OverlayView();
-
       const div = document.createElement('div');
 
-      const _map = new google.maps.Map(div, {
+      const map = new google.maps.Map(div, {
         ...props.defaultOptions,
         ...props,
       });
 
       div.style.width = div.style.height = '100%';
 
-      setRef(ref, _map);
-
-      t.onRemove = t.draw = noop;
-
-      t.onAdd = () => {
-        setPanes(t.getPanes()!);
+      setRef(ref, map);
 
-        t.setMap(null);
-      };
-
-      t.setMap(_map);
-
-      return {
-        _map,
-        _divRef(el: HTMLDivElement | null) {
+      return [
+        map,
+        (el: HTMLDivElement | null) => {
           if (el) {
             el.prepend(div);
           } else {
             setRef(ref, el);
           }
         },
-      };
+      ] as const;
     });
 
+    const map = data[0];
+
     useHandlersAndProps(
-      data._map,
+      map,
       props,
       {
         onCenterChanged: 'center',
@@ -122,12 +108,10 @@ const GoogleMap = forwardRef<google.maps.Map, PropsWithChildren<Props>>(
     );
 
     return (
-      <div ref={data._divRef} className={props.className} style={props.style}>
+      <div ref={data[1]} className={props.className} style={props.style}>
         {children && (
-          <MapContext.Provider value={data._map}>
-            <PanesContext.Provider value={panes}>
-              {children}
-            </PanesContext.Provider>
+          <MapContext.Provider value={map}>
+            <PanesProvider map={map}>{children}</PanesProvider>
           </MapContext.Provider>
         )}
       </div>