Skip to content

Commit dbf1e94

Browse files
committed
docs(useStreetViewPanorama): add readme for useStreetViewPanorama hook
1 parent 5653a85 commit dbf1e94

File tree

1 file changed

+83
-0
lines changed

1 file changed

+83
-0
lines changed

library/docs/useStreetViewPanorama.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# `useStreetViewPanorama` Hook
2+
3+
React hook to use the [Street View Panorama](https://developers.google.com/maps/documentation/javascript/streetview) in any component.
4+
5+
## Usage
6+
The `StreetViewPanorama` can either be used within a DOM element, like a `<div>` element:
7+
8+
```tsx
9+
import React, {useEffect} from 'react';
10+
import {
11+
useGoogleMap,
12+
useStreetViewPanorama
13+
} from '@ubilabs/google-maps-react-hooks';
14+
15+
const MyComponent = () => {
16+
const [divContainer, setDivContainer] = useState<HTMLDivElement | null>(null);
17+
18+
const divRef = useCallback(
19+
(node: React.SetStateAction<HTMLDivElement | null>) => {
20+
node && setDivContainer(node);
21+
},
22+
[]
23+
);
24+
25+
const map = useGoogleMap();
26+
27+
const position = /** google.maps.LatLng */;
28+
const pov = /** google.maps.StreetViewPov */;
29+
30+
const panorama = useStreetViewPanorama({
31+
divElement: divContainer,
32+
position,
33+
pov
34+
});
35+
36+
return <div className={styles.pano} ref={divRef} />;
37+
};
38+
```
39+
40+
or be created on its own to be used by the map:
41+
42+
```tsx
43+
import React, {useEffect} from 'react';
44+
import {
45+
useGoogleMap,
46+
useStreetViewPanorama
47+
} from '@ubilabs/google-maps-react-hooks';
48+
49+
const MyComponent = () => {
50+
const position = /** google.maps.LatLng */;
51+
const pov = /** google.maps.StreetViewPov */;
52+
53+
useStreetViewPanorama({
54+
position,
55+
pov
56+
});
57+
58+
return null;
59+
};
60+
```
61+
62+
## Return value
63+
64+
Returns a [`StreetViewPanorama`](google.maps.StreetViewPanorama) instance to use directly.
65+
66+
```TypeScript
67+
google.maps.StreetViewPanorama
68+
```
69+
70+
## Parameters
71+
72+
### StreetViewPanoramaProps
73+
74+
Optional options that can be passed to display a street view location: [Street View Locations and Point-of-View(POV)](https://developers.google.com/maps/documentation/javascript/streetview#StreetViewLocation).
75+
76+
```TypeScript
77+
interface StreetViewPanoramaProps {
78+
divElement?: HTMLElement | null;
79+
position?: google.maps.LatLng | google.maps.LatLngLiteral;
80+
pov?: google.maps.StreetViewPov;
81+
zoom?: number;
82+
}
83+
```

0 commit comments

Comments
 (0)