Skip to content

Commit b5258d2

Browse files
plumdumplingplumdumpling
authored
Merge branch 'develop' into chore/workflows
2 parents 0144c55 + 2d76869 commit b5258d2

22 files changed

+473
-1
lines changed

‎README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ This is a JavaScript library to easily implement a Google Maps map into your Rea
1616
- [useDirections](#usedirections)
1717
- [useGeocoder](#usegeocoder)
1818
- [usePlacesService](#useplacesservice)
19+
- [useDistanceMatrix](#usedistancematrix)
1920
- [Publish](#publish)
2021

2122
## Requirements
@@ -479,6 +480,35 @@ Returns the [`PlacesService`](google.maps.places.PlacesService) class to use dir
479480
google.maps.places.PlacesService
480481
```
481482

483+
### useDistanceMatrix
484+
485+
React hook to use the [Google Maps Distance Matrix Service](https://developers.google.com/maps/documentation/javascript/distancematrix) in any component.
486+
487+
#### Usage
488+
489+
```jsx
490+
import React from 'react';
491+
import { useDistanceMatrix } from '@ubilabs/google-maps-react-hooks';
492+
493+
const MyComponent = () => {
494+
const service = useDistanceMatrix();
495+
496+
service.getDistanceMatrix(request, response => {
497+
// Do something with the response
498+
}
499+
500+
return (...);
501+
};
502+
```
503+
504+
#### Return value
505+
506+
Returns the [`DistanceMatrixService`](google.maps.DistanceMatrixService) class to use directly.
507+
508+
```TypeScript
509+
google.maps.DistanceMatrixService
510+
```
511+
482512
## Publish (only for maintainers)
483513
484514
`npm publish --access public`

‎examples/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"clean-examples": "rm -rf public .parcel-cache",
99
"start:map": "PARCEL_AUTOINSTALL=false parcel serve ./basic-google-map/index.html --dist-dir public --port 1234",
1010
"start:map-markers": "PARCEL_AUTOINSTALL=false parcel serve ./google-map-with-markers/index.html --dist-dir public --port 1234",
11-
"start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234"
11+
"start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234",
12+
"start:places": "PARCEL_AUTOINSTALL=false parcel serve ./places/index.html --dist-dir public --port 1234",
13+
"start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234"
1214
},
1315
"license": "MIT",
1416
"dependencies": {

‎examples/places-autocomplete/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Basic Google Maps Setup Example
2+
3+
This is an example setup of a **Map with a Places Autocomplete Search** to show the usage of the **useAutocomplete hook** with the Google Maps React Hooks library.
4+
5+
## Instructions
6+
7+
To run this project, clone the Google Maps React Hooks repository locally.
8+
9+
First go to the root of the repository and run:
10+
11+
```shell
12+
npm install
13+
````
14+
15+
once to install all dependencies.
16+
17+
Then start this example locally with
18+
19+
```shell
20+
npm run start:autocomplete-example
21+
```
22+
23+
**NOTE**:
24+
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:
25+
26+
`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
27+
28+
An example can be found in `.env.example`.
29+
30+
## Output
31+
32+
The project will start at [localhost:1234](http://localhost:1234) and show a map with an input field and an autocomplete functionality.
33+
34+
![image](https://user-images.githubusercontent.com/39244966/196221028-34d47ae1-b612-4886-bd51-f736ffb77197.png)
35+
36+
![image](https://user-images.githubusercontent.com/39244966/196220079-22405c58-c364-48bf-b70c-dc828e4bd635.png)

‎examples/places-autocomplete/app.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, {FunctionComponent, useState, useCallback} from 'react';
2+
import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
3+
4+
import MapCanvas from './components/map-canvas/map-canvas';
5+
import PlacesSearch from './components/places-search/places-search';
6+
7+
import {GOOGLE_MAPS_API_KEY} from '../constants';
8+
9+
import './main.module.css';
10+
11+
const mapOptions = {
12+
center: {lat: 53.5582447, lng: 9.647645},
13+
zoom: 6,
14+
disableDefaultUI: true,
15+
zoomControl: true
16+
};
17+
18+
const App: FunctionComponent<Record<string, unknown>> = () => {
19+
const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
20+
21+
const mapRef = useCallback(
22+
(node: React.SetStateAction<HTMLDivElement | null>) => {
23+
node && setMapContainer(node);
24+
},
25+
[]
26+
);
27+
28+
return (
29+
<React.StrictMode>
30+
<GoogleMapProvider
31+
googleMapsAPIKey={GOOGLE_MAPS_API_KEY}
32+
mapContainer={mapContainer}
33+
options={mapOptions}
34+
// Add the places library
35+
libraries={['places']}
36+
>
37+
<div id="container">
38+
<MapCanvas ref={mapRef} />
39+
<PlacesSearch />
40+
</div>
41+
</GoogleMapProvider>
42+
</React.StrictMode>
43+
);
44+
};
45+
46+
export default App;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.map {
2+
width: 100%;
3+
height: 100%;
4+
}

‎examples/places-autocomplete/components/map-canvas/map-canvas.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, {forwardRef} from 'react';
2+
3+
import styles from './map-canvas.module.css';
4+
5+
const MapCanvas = forwardRef<HTMLDivElement, Record<string, unknown>>(
6+
(_, ref) => <div ref={ref} className={styles.map} />
7+
);
8+
9+
export default MapCanvas;

‎examples/places-autocomplete/components/places-search/places-search.module.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.searchInput {
2+
position: absolute;
3+
top: 1rem;
4+
right: 1rem;
5+
width: 20rem;
6+
height: 2rem;
7+
padding-left: 0.5rem;
8+
}

‎examples/places-autocomplete/components/places-search/places-search.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, {useEffect, useRef, useState} from 'react';
2+
import {useAutocomplete, useGoogleMap} from '@ubilabs/google-maps-react-hooks';
3+
4+
import styles from './places-search.module.css';
5+
6+
const PlacesSearch = () => {
7+
const {map} = useGoogleMap();
8+
9+
// Use the input ref to pass an input field to the useAutocomplete hook below
10+
const inputRef = useRef<HTMLInputElement | null>(null);
11+
12+
const [inputValue, setInputValue] = useState('');
13+
const [selectedPlace, setSelectedPlace] =
14+
useState<google.maps.places.PlaceResult | null>(null);
15+
16+
const [marker, setMarker] = useState<google.maps.Marker | null>(null);
17+
18+
const onPlaceChanged = (place: google.maps.places.PlaceResult) => {
19+
if (place) {
20+
setSelectedPlace(place);
21+
setInputValue(place.formatted_address || place.name);
22+
23+
// Keep focus on input element
24+
inputRef.current?.focus();
25+
}
26+
};
27+
28+
// Use the useAutocomplete hook and pass the input field ref and the onPlaceChanged function to it
29+
useAutocomplete({
30+
inputField: inputRef && inputRef.current,
31+
onPlaceChanged
32+
});
33+
34+
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
35+
setInputValue(event.target.value);
36+
};
37+
38+
useEffect(() => {
39+
if (map && selectedPlace) {
40+
if (marker) {
41+
marker.setMap(null);
42+
}
43+
44+
const markerOptions: google.maps.MarkerOptions = {
45+
map,
46+
position: selectedPlace?.geometry?.location,
47+
title: selectedPlace.name,
48+
clickable: false
49+
};
50+
51+
// Add a marker whenever a place was selected
52+
const newMarker = new google.maps.Marker(markerOptions);
53+
54+
setMarker(newMarker);
55+
}
56+
}, [map, selectedPlace]);
57+
58+
return (
59+
<input
60+
className={styles.searchInput}
61+
ref={inputRef}
62+
value={inputValue}
63+
onChange={handleInputChange}
64+
/>
65+
);
66+
};
67+
68+
export default PlacesSearch;

‎examples/places-autocomplete/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="de-DE">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, user-scalable=no"
8+
/>
9+
<title>
10+
Example Google Map with a places search to show the usage of the
11+
useAutocomplete hook of the Google Maps React Hooks.
12+
</title>
13+
<meta
14+
name="description"
15+
content="Example Google Map with a places search to show the usage of the useAutocomplete hook of the Google Maps React Hooks."
16+
/>
17+
</head>
18+
<body>
19+
<div id="app"></div>
20+
<script type="module" src="./index.tsx"></script>
21+
</body>
22+
</html>

‎examples/places-autocomplete/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import App from './app';
5+
6+
ReactDOM.render(<App />, document.getElementById('app'));

‎examples/places-autocomplete/main.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
html,
2+
body,
3+
:global(#app),
4+
:global(#container) {
5+
height: 100vh;
6+
overflow: hidden;
7+
margin: 0;
8+
padding: 0;
9+
}

‎examples/places/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Basic Google Maps Setup Example
2+
3+
This is an example setup to show a **Google Map with place** using the usePlacesService hook with the Google Maps React Hooks library.
4+
5+
## Instructions
6+
7+
To run this project, clone the Google Maps React Hooks repository locally.
8+
9+
Go to the root of the repository and run
10+
11+
12+
```shell
13+
npm install
14+
```
15+
16+
17+
once to install all dependencies.
18+
19+
Then start this example locally with
20+
21+
22+
```shell
23+
npm run start:places-example
24+
```
25+
26+
27+
**NOTE**:
28+
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:
29+
30+
`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
31+
32+
An example can be found in `.env.example`.
33+
34+
## Output
35+
36+
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.
37+
38+
![image](https://user-images.githubusercontent.com/39244966/196244324-8d761a8f-25d1-4e87-adb3-9d0d66f97b66.png)

‎examples/places/app.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, {FunctionComponent, useState, useCallback} from 'react';
2+
import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
3+
4+
import MapCanvas from './components/map-canvas/map-canvas';
5+
6+
import {GOOGLE_MAPS_API_KEY} from '../constants';
7+
8+
import './main.module.css';
9+
import PlacesExample from './components/places-example/places-example';
10+
11+
const mapOptions = {
12+
center: {lat: 53.5582447, lng: 9.647645},
13+
zoom: 20,
14+
disableDefaultUI: true,
15+
zoomControl: false,
16+
clickableIcons: false
17+
};
18+
19+
const App: FunctionComponent<Record<string, unknown>> = () => {
20+
const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
21+
22+
const mapRef = useCallback(
23+
(node: React.SetStateAction<HTMLDivElement | null>) => {
24+
node && setMapContainer(node);
25+
},
26+
[]
27+
);
28+
29+
return (
30+
<React.StrictMode>
31+
<GoogleMapProvider
32+
googleMapsAPIKey={GOOGLE_MAPS_API_KEY}
33+
mapContainer={mapContainer}
34+
options={mapOptions}
35+
// Add library places
36+
libraries={['places']}
37+
>
38+
<div id="container">
39+
<MapCanvas ref={mapRef} />
40+
<PlacesExample />
41+
</div>
42+
</GoogleMapProvider>
43+
</React.StrictMode>
44+
);
45+
};
46+
47+
export default App;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.map {
2+
width: 100%;
3+
height: 100%;
4+
}

‎examples/places/components/map-canvas/map-canvas.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, {forwardRef} from 'react';
2+
3+
import styles from './map-canvas.module.css';
4+
5+
const MapCanvas = forwardRef<HTMLDivElement, Record<string, unknown>>(
6+
(_, ref) => <div ref={ref} className={styles.map} />
7+
);
8+
9+
export default MapCanvas;

0 commit comments

Comments
 (0)