Skip to content

Commit 97c5940

Browse files
authored
Merge pull request #68 from ubilabs/feat/add-elevation-hook
Feat/add elevation hook
2 parents 7ed5cc3 + 9042d03 commit 97c5940

File tree

2 files changed

+59
-3
lines changed

2 files changed

+59
-3
lines changed

README.md

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ React hook to use the [Google Maps Distance Matrix Service](https://developers.g
486486

487487
#### Usage
488488

489-
```jsx
489+
```tsx
490490
import React from 'react';
491491
import { useDistanceMatrix } from '@ubilabs/google-maps-react-hooks';
492492

@@ -501,14 +501,45 @@ const MyComponent = () => {
501501
};
502502
```
503503
504-
#### Return value
505-
506504
Returns the [`DistanceMatrixService`](google.maps.DistanceMatrixService) class to use directly.
507505
508506
```TypeScript
509507
google.maps.DistanceMatrixService
510508
```
511509
510+
### useElevationService
511+
512+
React hook to use the [Elevation Service](https://developers.google.com/maps/documentation/javascript/elevation) in any component.
513+
514+
#### Usage
515+
516+
```tsx
517+
import React, {useEffect} from 'react';
518+
import {useElevationService} from '@ubilabs/google-maps-react-hooks';
519+
520+
const MyComponent = () => {
521+
const elevator = useElevationService();
522+
const location = /** google.maps.LatLng */;
523+
524+
useEffect(() => {
525+
elevator?.getElevationForLocations(
526+
{locations: [location]},
527+
(results: google.maps.ElevationResult[]) => {
528+
// Do something with results
529+
}
530+
);
531+
}, [location]);
532+
```
533+
534+
#### Return value
535+
536+
Returns the [`ElevationService`](google.maps.places.ElevationService) class to use directly.
537+
538+
```TypeScript
539+
google.maps.places.ElevationService
540+
```
541+
542+
512543
## Publish (only for maintainers)
513544
514545
`npm publish --access public`

src/hooks/elevation.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {useMemo} from 'react';
2+
3+
import useGoogleMap from './map-instance';
4+
5+
/**
6+
* Hook to get Elevation Service instance
7+
*/
8+
const useElevationService = (): google.maps.ElevationService | null => {
9+
const {map} = useGoogleMap();
10+
11+
// Creates an Elevation Service instance
12+
const elevationService =
13+
useMemo<google.maps.ElevationService | null>(() => {
14+
// Wait for map to be initialized
15+
if (!map) {
16+
return null;
17+
}
18+
19+
return new google.maps.ElevationService();
20+
}, [map]);
21+
22+
return elevationService;
23+
};
24+
25+
export default useElevationService;

0 commit comments

Comments
 (0)