Merge branch 'develop' into chore/workflows

Author: plumdumpling

.pretiierrc .prettierrc.pretiierrc renamed to .prettierrc

@@ -6,7 +6,7 @@
   "singleQuote": true,
   "trailingComma": "none",
   "bracketSpacing": false,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "arrowParens": "avoid",
   "parser": "typescript"
-}
+}

examples/geocoding/README.md

@@ -0,0 +1,26 @@
+# Basic Google Maps Setup Example
+
+This is an example setup to show the usage of the **useGeocoder hook** with the Google Maps React Hooks library.
+
+## Instructions
+
+To run this project, clone the Google Maps React Hooks repository locally.
+
+At the root of the repository, run:
+
+```shell
+npm run start:geocoding-example
+```
+
+**NOTE**:
+To see the examples it is needed to add an `.env` file with a [Google Maps API key](https://developers.google.com/maps/documentation/embed/get-api-key#:~:text=Go%20to%20the%20Google%20Maps%20Platform%20%3E%20Credentials%20page.&text=On%20the%20Credentials%20page%2C%20click,Click%20Close.) in the following format:
+
+`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
+
+An example can be found in `.env.example`.
+
+## Output
+
+The project will start at [localhost:1234](http://localhost:1234) and show a Google Map where the user can click on the map and the coordinates will be reversed geocoded into a human readable address.
+
+![image](https://user-images.githubusercontent.com/39244966/196205574-b0c318a8-1e55-4c52-a18f-43fc13d2d903.png)

examples/geocoding/app.tsx

@@ -0,0 +1,45 @@
+import React, {FunctionComponent, useState, useCallback} from 'react';
+import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
+
+import MapCanvas from './components/map-canvas/map-canvas';
+import GeocoderExample from './components/geocoder-example/geocoder-example';
+
+import {GOOGLE_MAPS_API_KEY} from '../constants';
+
+import './main.module.css';
+
+const mapOptions = {
+  center: {lat: 51.08998021141488, lng: 10.627828045134935},
+  zoom: 8,
+  disableDefaultUI: true,
+  zoomControl: false,
+  clickableIcons: false
+};
+
+const App: FunctionComponent<Record<string, unknown>> = () => {
+  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
+
+  const mapRef = useCallback(
+    (node: React.SetStateAction<HTMLDivElement | null>) => {
+      node && setMapContainer(node);
+    },
+    []
+  );
+
+  return (
+    <React.StrictMode>
+      <GoogleMapProvider
+        googleMapsAPIKey={GOOGLE_MAPS_API_KEY}
+        mapContainer={mapContainer}
+        options={mapOptions}
+      >
+        <div id="container">
+          <MapCanvas ref={mapRef} />
+          <GeocoderExample />
+        </div>
+      </GoogleMapProvider>
+    </React.StrictMode>
+  );
+};
+
+export default App;

examples/geocoding/components/geocoder-example/geocoder-example.tsx

@@ -0,0 +1,87 @@
+import {useEffect, useState} from 'react';
+import {useGeocoder, useGoogleMap} from '@ubilabs/google-maps-react-hooks';
+
+const GeocoderExample = () => {
+  const {map} = useGoogleMap();
+
+  // Get the geocoder from the useGeocoder hook
+  const geocoder = useGeocoder();
+
+  const initialPosition = {lat: 51.08998021141488, lng: 10.627828045134935};
+
+  const [marker, setMarker] = useState<google.maps.Marker | null>(null);
+  const [infoWindow, setInfoWindow] = useState<google.maps.InfoWindow | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (!map) {
+      return () => {};
+    }
+
+    // Add an initial marker
+    if (!marker) {
+      const initialMarker = new google.maps.Marker({
+        map,
+        position: initialPosition
+      });
+
+      setMarker(initialMarker);
+
+      return () => {};
+    }
+
+    // Add an initial infowindow
+    if (!infoWindow) {
+      const initialInfoWindow = new google.maps.InfoWindow({
+        content:
+          'Click somewhere on the map to reverse geocode the position to an address.',
+        position: initialPosition
+      });
+
+      setInfoWindow(initialInfoWindow);
+      initialInfoWindow.open(map, marker);
+
+      return () => {};
+    }
+
+    // Click on the map and open an infowindow with the reversed geocoded address.
+    map.addListener('click', (mapsMouseEvent: google.maps.MapMouseEvent) => {
+      // Use the geocoder to reverse geocode the position from the map
+      // and add the address as content of the infowindow
+      geocoder?.geocode(
+        {location: mapsMouseEvent.latLng},
+        (
+          results: google.maps.GeocoderResult[],
+          status: google.maps.GeocoderStatus
+        ) => {
+          if (status === 'OK') {
+            const position = results[0].geometry.location;
+            const formattedAddress = results[0].formatted_address;
+
+            marker.setPosition(position);
+
+            infoWindow.setPosition(position);
+            infoWindow.setContent(formattedAddress);
+
+            map.setCenter(results[0].geometry.location);
+          } else {
+            // eslint-disable-next-line no-console
+            console.log(
+              `Geocode was not successful for the following reason: ${status}`
+            );
+          }
+        }
+      );
+    });
+
+    // Clean up listeners and remove marker and infowindow instances
+    return () => {
+      google.maps.event.clearListeners(map, 'click');
+    };
+  }, [map, infoWindow, marker]);
+
+  return null;
+};
+
+export default GeocoderExample;

examples/geocoding/components/map-canvas/map-canvas.module.css

@@ -0,0 +1,4 @@
+.map {
+  width: 100%;
+  height: 100%;
+}

examples/geocoding/components/map-canvas/map-canvas.tsx

@@ -0,0 +1,9 @@
+import React, {forwardRef} from 'react';
+
+import styles from './map-canvas.module.css';
+
+const MapCanvas = forwardRef<HTMLDivElement, Record<string, unknown>>(
+  (_, ref) => <div ref={ref} className={styles.map} />
+);
+
+export default MapCanvas;

examples/geocoding/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de-DE">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <title>
+      Example of the usage of the useGeocoding hook with the Google Maps React
+      Hooks.
+    </title>
+    <meta
+      name="description"
+      content="Example of the usage of the useGeocoding hook with the Google Maps React Hooks."
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

examples/geocoding/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('app'));

examples/geocoding/main.module.css

@@ -0,0 +1,9 @@
+html,
+body,
+:global(#app),
+:global(#container) {
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}

examples/google-map-with-markers/components/map-markers/map-markers.tsx

@@ -58,7 +58,7 @@ const MapMarkers: VoidFunctionComponent = (): null => {
     if (map) {
       const initialBounds = new google.maps.LatLngBounds();
 
-      const museumMarkers: Array<google.maps.Marker> = museums.map((museum) => {
+      const museumMarkers: Array<google.maps.Marker> = museums.map(museum => {
         const {position, name} = museum;
 
         const markerOptions: google.maps.MarkerOptions = {