Skip to content

Commit 9042d03

Browse files
BiniCodesBiniCodes
committed
Merge branch 'develop' into feat/add-elevation-hook
2 parents c6c8366 + 7ed5cc3 commit 9042d03

File tree

16 files changed

+294
-18
lines changed

16 files changed

+294
-18
lines changed

‎.github/workflows/publish.yml

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
name: Publish package
2+
23
on:
34
push:
45
tags:
56
- "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
7+
68
jobs:
79
create-release:
810
name: Create Release
911
runs-on: ubuntu-latest
1012
outputs:
1113
upload_url: ${{ steps.create_release.outputs.upload_url }}
12-
1314
steps:
1415
- name: Create Release
1516
id: create_release
@@ -26,12 +27,27 @@ jobs:
2627
name: Publish to NPM
2728
runs-on: ubuntu-latest
2829
steps:
29-
- uses: actions/checkout@v2
30-
- uses: actions/setup-node@v2
30+
- name: Checkout repository from GitHub
31+
uses: actions/[email protected]
32+
- name: Setup npm
33+
uses: actions/setup-node@v2
3134
with:
32-
node-version: "12.x"
35+
node-version: "16"
3336
registry-url: "https://registry.npmjs.org"
34-
- run: npm install
35-
- run: npm publish --access public
37+
# npm cache folder is in ~/, not within the working directory
38+
- name: Cache npm directory
39+
uses: actions/cache@v2
40+
with:
41+
path: ~/.npm
42+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
43+
restore-keys: |
44+
${{ runner.os }}-node-
45+
# Node auth token is needed for private GitHub registry
46+
- name: Install dependencies
47+
run: npm install
48+
- name: Run tests
49+
run: npm run test
50+
- name: Publish
51+
run: npm publish --access public
3652
env:
3753
NODE_AUTH_TOKEN: ${{ secrets.NPM_BOT_ACCESS_TOKEN }}

‎.github/workflows/test.yml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: Run Tests
2+
3+
on: push
4+
5+
jobs:
6+
create-release:
7+
name: Test
8+
runs-on: ubuntu-latest
9+
timeout-minutes: 8
10+
steps:
11+
- name: Checkout repository from GitHub
12+
uses: actions/[email protected]
13+
- name: Setup npm
14+
uses: actions/setup-node@v2
15+
with:
16+
node-version: "16"
17+
# npm cache folder is in ~/, not within the working directory
18+
- name: Cache npm directory
19+
uses: actions/cache@v2
20+
with:
21+
path: ~/.npm
22+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
23+
restore-keys: |
24+
${{ runner.os }}-node-
25+
# Node auth token is needed for private GitHub registry
26+
- name: Install dependencies
27+
run: npm install
28+
- name: Run tests
29+
run: npm run test

‎README.md

Lines changed: 28 additions & 3 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,33 @@ 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+
```tsx
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+
Returns the [`DistanceMatrixService`](google.maps.DistanceMatrixService) class to use directly.
505+
506+
```TypeScript
507+
google.maps.DistanceMatrixService
508+
```
509+
482510
### useElevationService
483511
484512
React hook to use the [Elevation Service](https://developers.google.com/maps/documentation/javascript/elevation) in any component.
@@ -501,9 +529,6 @@ const MyComponent = () => {
501529
}
502530
);
503531
}, [location]);
504-
505-
return (...);
506-
};
507532
```
508533
509534
#### Return value

‎examples/basic-google-map/README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@ This is an example setup to show a **basic Google Map** with the Google Maps Rea
66

77
To run this project, clone the Google Maps React Hooks repository locally.
88

9-
At the root of the repository, run:
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
1018

1119
```shell
1220
npm run start:sample-map

‎examples/directions/README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Basic Google Maps Setup Example
2+
3+
This is an example setup to show the usage of the **useDirections hook with findAndRenderRoute** 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:directions-example
24+
```
25+
26+
**NOTE**:
27+
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:
28+
29+
`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
30+
31+
An example can be found in `.env.example`.
32+
33+
## Output
34+
35+
The project will start at [localhost:1234](http://localhost:1234) and show a Google Map with a route from Berlin to Munich, retrieved from directions.
36+
37+
![image](https://user-images.githubusercontent.com/39244966/196410364-de14d9a0-5ecf-430d-846e-bc04e405b889.png)

‎examples/directions/app.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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 DirectionsExample from './components/directions/directions';
6+
7+
import {GOOGLE_MAPS_API_KEY} from '../constants';
8+
9+
import './main.module.css';
10+
11+
const mapOptions = {
12+
center: {lat: 51.08998021141488, lng: 10.627828045134935},
13+
zoom: 6,
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+
>
36+
<div id="container">
37+
<MapCanvas ref={mapRef} />
38+
<DirectionsExample />
39+
</div>
40+
</GoogleMapProvider>
41+
</React.StrictMode>
42+
);
43+
};
44+
45+
export default App;

‎examples/directions/components/directions/directions.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import {useEffect} from 'react';
2+
import {useDirections, useGoogleMap} from '@ubilabs/google-maps-react-hooks';
3+
4+
const DirectionsExample = () => {
5+
const {map} = useGoogleMap();
6+
7+
const directionsOptions = {
8+
renderOnMap: true,
9+
renderOptions: {
10+
suppressMarkers: true,
11+
polylineOptions: {strokeColor: '#FB2576', strokeWeight: 4}
12+
}
13+
};
14+
15+
// Use findAndRenderRoute to get directions and render a route to the map
16+
const {findAndRenderRoute} = useDirections(directionsOptions);
17+
18+
useEffect(() => {
19+
if (!map || !findAndRenderRoute) {
20+
return;
21+
}
22+
23+
// Form Request to pass to findAndRenderRoute
24+
// https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests
25+
const request = {
26+
travelMode: google.maps.TravelMode.DRIVING,
27+
origin: 'Berlin',
28+
destination: 'München',
29+
drivingOptions: {
30+
departureTime: new Date(),
31+
trafficModel: google.maps.TrafficModel.BEST_GUESS
32+
}
33+
};
34+
35+
findAndRenderRoute(request)
36+
.then((result: google.maps.DirectionsResult) => {
37+
// eslint-disable-next-line no-console
38+
console.log(result);
39+
})
40+
.catch((errorStatus: google.maps.DirectionsStatus) => {
41+
console.error(errorStatus);
42+
});
43+
}, [map]);
44+
45+
return null;
46+
};
47+
48+
export default DirectionsExample;

‎examples/directions/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/directions/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/directions/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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 of the usage of the useDirections hook with the Google Maps React Hooks.
11+
</title>
12+
<meta
13+
name="description"
14+
content="Example of the usage of the useDirections hook with the Google Maps React Hooks."
15+
/>
16+
</head>
17+
<body>
18+
<div id="app"></div>
19+
<script type="module" src="./index.tsx"></script>
20+
</body>
21+
</html>

‎examples/directions/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/directions/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/geocoding/README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@ This is an example setup to show the usage of the **useGeocoder hook** with the
66

77
To run this project, clone the Google Maps React Hooks repository locally.
88

9-
At the root of the repository, run:
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
1018

1119
```shell
1220
npm run start:geocoding-example

‎examples/google-map-with-markers/README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,15 @@ This is an example setup to show a **Google Map with markers** with the Google M
66

77
To run this project, clone the Google Maps React Hooks repository locally.
88

9-
At the root of the repository, run:
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
1018

1119
```shell
1220
npm run start:map-with-markers

‎examples/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"start:map-markers": "PARCEL_AUTOINSTALL=false parcel serve ./google-map-with-markers/index.html --dist-dir public --port 1234",
1111
"start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234",
1212
"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"
13+
"start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234",
14+
"start:directions": "PARCEL_AUTOINSTALL=false parcel serve ./directions/index.html --dist-dir public --port 1234"
1415
},
1516
"license": "MIT",
1617
"dependencies": {

0 commit comments

Comments
 (0)