@ttoss/google-maps 0.6.1 → 0.8.4

package/README.md

@@ -1,8 +1,4 @@
-<h1 align="center">
-
-`@ttoss/google-maps`
-
-</h1>
+# @ttoss/google-maps
 
 ## 📚 About
 
@@ -10,18 +6,235 @@
 
 ## 🚀 Get Started
 
-- Install Dependencies
+### Install @ttoss/google-maps
 
-```sh
-$ yarn
+```shell
+$ yarn add
+# or
+$ npm install @ttoss/google-maps
 ```
 
-- Build @ttoss/google-maps
+## 📄 Examples of use
 
-```sh
-$ yarn build
-# or
-$ npm run build
+### Map
+
+```tsx
+export type MapProps = {
+  width?: number | string;
+  height?: number | string;
+  image?: Omit<MapImageOptions, 'map'>;
+  options?: google.maps.MapOptions;
+};
+
+const Map = ({ height, width, image, options }: MapProps) => {
+  const { googleMaps } = useGoogleMaps();
+
+  const [mapDivRef, setMapDivRef] = React.useState<HTMLDivElement | null>(null);
+
+  const map = React.useMemo(() => {
+    if (googleMaps && mapDivRef) {
+      const googleMapsMap = new googleMaps.Map(mapDivRef, defaultOptions);
+      return googleMapsMap;
+    }
+
+    return null;
+  }, [googleMaps, mapDivRef]);
+
+  React.useEffect(() => {
+    if (map && options?.center) {
+      map.setCenter(options.center);
+    }
+  }, [map, options?.center]);
+
+  return (
+    <div id="google-maps" ref={(r) => setMapDivRef(r)} sx={{ width, height }} />
+  );
+};
+
+Map.defaultProps = {
+  width: 400,
+  height: 300,
+} as MapProps;
+
+export default Map;
+```
+
+### Latitude and Longitude
+
+```ts
+import { useGeocoder } from '@ttoss/google-maps';
+
+type MapGeocoderResult = google.maps.GeocoderResult;
+type MapGeocoderStatus = google.maps.GeocoderStatus;
+
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+
+export const useGeocoding = () => {
+  const { geocoder } = useGeocoder();
+
+  const getLatLong = ({ address }: { address: string }): Promise<LatLng> => {
+    return new Promise((resolve, reject) => {
+      if (!geocoder) {
+        return reject(new Error('Geocoder not defined'));
+      }
+
+      geocoder.geocode(
+        { address },
+        (results: MapGeocoderResult[] | null, status: MapGeocoderStatus) => {
+          if (results && status === window.google.maps.GeocoderStatus.OK) {
+            const lat = results[0].geometry.location.lat();
+            const lng = results[0].geometry.location.lng();
+
+            return resolve({
+              lat,
+              lng,
+            });
+          } else {
+            console.log(
+              'Geocode was not successful for the following reason: ',
+              status
+            );
+            return reject(new Error('Result not found'));
+          }
+        }
+      );
+    });
+  };
+
+  return { getLatLong };
+};
+```
+
+### Providers
+
+```tsx
+import * as React from 'react';
+
+import { GoogleMapsProvider } from '@ttoss/google-maps';
+
+const Providers: React.FC = ({ children }) => {
+  const apiKey = 'YOUR_API_KEY';
+
+  if (!apiKey) {
+    return <>{children}</>;
+  }
+
+  return (
+    <GoogleMapsProvider apiKey={apiKey} libraries={['places']}>
+      {children}
+    </GoogleMapsProvider>
+  );
+};
+
+export default Providers;
+```
+
+### Autocomplete
+
+```tsx
+import React from 'react';
+
+import { usePlacesAutocomplete } from '@ttoss/google-maps';
+
+const Component = () => {
+  const [text, setText] = React.useState('');
+  const clearText = () => setText('');
+
+  const apiKey = 'YOUR_API_KEY';
+
+  const {
+    ready,
+    value,
+    suggestions: { status, data },
+    setValue,
+    clearSuggestions,
+  } = usePlacesAutocomplete({
+    debounce: 300,
+    cacheKey: apiKey,
+  });
+
+  const handleInput = (e: any) => {
+    setValue(e.target.value);
+  };
+
+  const handleSelect =
+    ({ description }: { description: string }) =>
+    () => {
+      setValue(description, false);
+      clearSuggestions();
+    };
+
+  const renderSuggestions = () =>
+    data.map((suggestion) => {
+      const {
+        place_id,
+        structured_formatting: { main_text, secondary_text },
+      } = suggestion;
+
+      return (
+        <li key={place_id} onClick={() => handleSelect(suggestion)}>
+          <strong>{main_text}</strong>
+
+          <small>{secondary_text}</small>
+        </li>
+      );
+    });
+
+  return (
+    <div>
+      <input value={value} onChange={handleInput} disabled={!ready} />
+
+      {status === 'OK' && <ul>{renderSuggestions()}</ul>}
+    </div>
+  );
+};
+
+export default Component;
+```
+
+## 📘 Types
+
+```ts
+import { ScriptStatus } from '@ttoss/hooks';
+
+const useMap: (options: google.maps.MapOptions) => {
+  map: google.maps.Map | null;
+  ref: React.RefObject<HTMLDivElement>;
+  isMapInitialized: boolean;
+};
+
+const useGeocoder: () => {
+  geocoder: google.maps.Geocoder | null;
+  isGeocoderInitialized: boolean;
+};
+
+type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
+
+type Extends<T, U extends T> = U;
+
+type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
+
+type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
+
+export type GoogleMaps = typeof google.maps;
+
+const GoogleMapsProvider: React.FC<{
+  apiKey: string;
+  libraries?: Libraries[] | undefined;
+}>;
+
+const useGoogleMaps: () =>
+  | {
+      status: LoadedMapsStatus;
+      googleMaps: GoogleMaps;
+    }
+  | {
+      status: NotLoadedMapStatus;
+      googleMaps: null;
+    };
 ```
 
 ---
@@ -33,5 +246,5 @@ $ npm run build
 <br/>
 
 <h4 align="center">
-    Special thanks for the inspiring <a href="https://github.com/jmarceli/react-hook-google-maps">react-hook-google-maps</a>  documentation.
+    Special thanks for the inspiring <a href="https://github.com/jmarceli/react-hook-google-maps">react-hook-google-maps</a> and <a href="https://github.com/wellyshen/use-places-autocomplete">use-places-autocomplete</a> documentation.
 </h4>

package/dist/esm/index.js

@@ -40,18 +40,37 @@ var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
 };
 var useGoogleMaps = () => useContext(GoogleMapsContext);
 
-// src/useMap.ts
+// src/useGeocoder.ts
 import {
   useMemo as useMemo2,
-  useRef,
   useState
 } from "react";
+var useGeocoder = () => {
+  const { googleMaps } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = useState(false);
+  const geocoder = useMemo2(() => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [googleMaps]);
+  return { geocoder, isGeocoderInitialized };
+};
+
+// src/useMap.ts
+import {
+  useMemo as useMemo3,
+  useRef,
+  useState as useState2
+} from "react";
 var useMap = (options) => {
   const ref = useRef(null);
   const { googleMaps } = useGoogleMaps();
-  const [isMapInitialized, setIsMapInitialized] = useState(false);
+  const [isMapInitialized, setIsMapInitialized] = useState2(false);
   const optionsStringify = JSON.stringify(options);
-  const map = useMemo2(() => {
+  const map = useMemo3(() => {
     if (googleMaps && ref.current) {
       const parsedOptions = JSON.parse(optionsStringify);
       const googleMapsMap = new googleMaps.Map(ref.current, parsedOptions);
@@ -64,6 +83,7 @@ var useMap = (options) => {
 };
 export {
   GoogleMapsProvider,
+  useGeocoder,
   useGoogleMaps,
   useMap
 };

package/dist/index.d.ts

@@ -23,10 +23,15 @@ declare const useGoogleMaps: () => {
     googleMaps: null;
 };
 
+declare const useGeocoder: () => {
+    geocoder: google.maps.Geocoder | null;
+    isGeocoderInitialized: boolean;
+};
+
 declare const useMap: (options: google.maps.MapOptions) => {
     map: google.maps.Map | null;
     ref: React.RefObject<HTMLDivElement>;
     isMapInitialized: boolean;
 };
 
-export { GoogleMapsProvider, useGoogleMaps, useMap };
+export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap };

package/dist/index.js

@@ -40,6 +40,25 @@ var GoogleMapsProvider = ({ children, apiKey, libraries }) => {
 };
 var useGoogleMaps = () => _react.useContext.call(void 0, GoogleMapsContext);
 
+// src/useGeocoder.ts
+
+
+
+
+var useGeocoder = () => {
+  const { googleMaps } = useGoogleMaps();
+  const [isGeocoderInitialized, setIsGeocoderInitialized] = _react.useState.call(void 0, false);
+  const geocoder = _react.useMemo.call(void 0, () => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+    return null;
+  }, [googleMaps]);
+  return { geocoder, isGeocoderInitialized };
+};
+
 // src/useMap.ts
 
 
@@ -66,4 +85,5 @@ var useMap = (options) => {
 
 
 
-exports.GoogleMapsProvider = GoogleMapsProvider; exports.useGoogleMaps = useGoogleMaps; exports.useMap = useMap;
+
+exports.GoogleMapsProvider = GoogleMapsProvider; exports.useGeocoder = useGeocoder; exports.useGoogleMaps = useGoogleMaps; exports.useMap = useMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "0.6.1",
+  "version": "0.8.4",
   "author": "ttoss",
   "contributors": [
     {
@@ -31,12 +31,12 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ttoss/hooks": "^0.6.1",
+    "@ttoss/hooks": "^0.8.4",
     "@types/google.maps": "^3.45.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "a348cbdd81ca30040a403d491724b7c5dd0d8395"
+  "gitHead": "9d8124a3110e71122dbdeebc791bac649e43791c"
 }

package/src/GoogleMapsProvider.spec.tsx

@@ -20,7 +20,7 @@ const googleMock = {
 };
 
 beforeAll(() => {
-  (global.google as any) = googleMock;
+  (global.google as unknown) = googleMock;
 });
 
 const RenderStatus = () => {

package/src/index.spec.ts

@@ -0,0 +1,8 @@
+import * as googleMaps from './index';
+
+test('should export all methods', () => {
+  expect(googleMaps.GoogleMapsProvider).toBeDefined();
+  expect(googleMaps.useGeocoder).toBeDefined();
+  expect(googleMaps.useGoogleMaps).toBeDefined();
+  expect(googleMaps.useMap).toBeDefined();
+});

package/src/index.ts

@@ -1,2 +1,3 @@
 export { GoogleMapsProvider, useGoogleMaps } from './GoogleMapsProvider';
+export { useGeocoder } from './useGeocoder';
 export { useMap } from './useMap';

package/src/useGeocoder.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { useGoogleMaps } from './GoogleMapsProvider';
+
+export const useGeocoder = () => {
+  const { googleMaps } = useGoogleMaps();
+
+  const [isGeocoderInitialized, setIsGeocoderInitialized] =
+    React.useState(false);
+
+  const geocoder = React.useMemo(() => {
+    if (googleMaps) {
+      const googleMapsGeocoder = new googleMaps.Geocoder();
+      setIsGeocoderInitialized(true);
+      return googleMapsGeocoder;
+    }
+
+    return null;
+  }, [googleMaps]);
+
+  return { geocoder, isGeocoderInitialized };
+};