Merge pull request #65 from ubilabs/feat/add-places-example

feat(examples): add places example

Author: BiniCodes

examples/package.json

@@ -8,8 +8,9 @@
     "clean-examples": "rm -rf public .parcel-cache",
     "start:map": "PARCEL_AUTOINSTALL=false parcel serve ./basic-google-map/index.html --dist-dir public --port 1234",
     "start:map-markers": "PARCEL_AUTOINSTALL=false parcel serve ./google-map-with-markers/index.html --dist-dir public --port 1234",
-    "start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234",
-    "start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234"
+    "start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234",
+    "start:places": "PARCEL_AUTOINSTALL=false parcel serve ./places/index.html --dist-dir public --port 1234",
+    "start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234"
   },
   "license": "MIT",
   "dependencies": {

examples/places/README.md

@@ -0,0 +1,38 @@
+# Basic Google Maps Setup Example
+
+This is an example setup to show a **Google Map with place** using the usePlacesService hook with the Google Maps React Hooks library.
+
+## Instructions
+
+To run this project, clone the Google Maps React Hooks repository locally.
+
+Go to the root of the repository and run
+
+
+```shell
+npm install
+```
+
+
+once to install all dependencies.
+
+Then start this example locally with
+
+
+```shell
+npm run start:places-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 that highlights all nearby Cafes to the central station in Hamburg, and their opening hours. Information is retrieved from Places Service.
+
+![image](https://user-images.githubusercontent.com/39244966/196244324-8d761a8f-25d1-4e87-adb3-9d0d66f97b66.png)

examples/places/app.tsx

@@ -0,0 +1,47 @@
+import React, {FunctionComponent, useState, useCallback} from 'react';
+import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
+
+import MapCanvas from './components/map-canvas/map-canvas';
+
+import {GOOGLE_MAPS_API_KEY} from '../constants';
+
+import './main.module.css';
+import PlacesExample from './components/places-example/places-example';
+
+const mapOptions = {
+  center: {lat: 53.5582447, lng: 9.647645},
+  zoom: 20,
+  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}
+        // Add library places
+        libraries={['places']}
+      >
+        <div id="container">
+          <MapCanvas ref={mapRef} />
+          <PlacesExample />
+        </div>
+      </GoogleMapProvider>
+    </React.StrictMode>
+  );
+};
+
+export default App;

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

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

examples/places/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/places/components/places-example/places-example.tsx

@@ -0,0 +1,66 @@
+import {useEffect} from 'react';
+
+import {
+  useGoogleMap,
+  usePlacesService
+} from '@ubilabs/google-maps-react-hooks';
+
+const PlacesExample = () => {
+  const {map} = useGoogleMap();
+
+  // Get the places service from the usePlacesService hook
+  const service = usePlacesService();
+
+  useEffect(() => {
+    if (!map || !service) {
+      return;
+    }
+
+    const bounds = new google.maps.LatLngBounds();
+
+    const request = {
+      location: {lat: 53.550481787761306, lng: 9.992336490896136},
+      radius: 500,
+      type: 'cafe'
+    };
+
+    function callback(
+      results: google.maps.places.PlaceResult[],
+      status: google.maps.places.PlacesServiceStatus
+    ) {
+      if (status === google.maps.places.PlacesServiceStatus.OK) {
+        for (let index = 0; index < results.length; index++) {
+          const name = results[index].name;
+          const position = results[index].geometry?.location;
+          const openingHours = results[index].opening_hours;
+
+          const isOpenStatus = openingHours ? 'Is open' : 'Closed';
+
+          if (!position) {
+            return;
+          }
+
+          const marker = new google.maps.Marker({
+            map,
+            position
+          });
+
+          map?.fitBounds(bounds.extend(position));
+
+          const infowindow = new google.maps.InfoWindow({
+            position,
+            content: `<b>${name}</b> is ${isOpenStatus}`
+          });
+
+          infowindow.open(map, marker);
+        }
+      }
+    }
+
+    service.nearbySearch(request, callback);
+  }, [map]);
+
+  return null;
+};
+
+export default PlacesExample;

examples/places/index.html

@@ -0,0 +1,19 @@
+<!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>Google Maps with places, using the usePlacesService hook with the Google Maps React Hooks.</title>
+    <meta
+      name="description"
+      content="Google Maps with places, using the usePlacesService hook with the Google Maps React Hooks."
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

examples/places/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/places/main.module.css

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

package.json

@@ -24,8 +24,9 @@
     "postversion": "git push -u origin chore/release-${npm_package_version} && git push --tags --no-verify",
     "start:sample-map": "cd examples && npm run clean-examples && npm i && npm run start:map",
     "start:map-with-markers": "cd examples && npm run clean-examples && npm i && npm run start:map-markers",
-    "start:autocomplete-example": "cd examples && npm run clean-examples && npm run start:autocomplete",
-    "start:geocoding-example": "cd examples && npm run clean-examples && npm i && npm run start:geocoding"
+    "start:geocoding-example": "cd examples && npm run clean-examples && npm i && npm run start:geocoding",
+    "start:places-example": "cd examples && npm run clean-examples && npm run start:places",
+    "start:autocomplete-example": "cd examples && npm run clean-examples && npm run start:autocomplete"
   },
   "keywords": [
     "React hooks",