Skip to content

Commit b2381d1

Browse files
pyjun01pyjun01
committed
docs: create GoogleMap page
1 parent d3cc71a commit b2381d1

4 files changed

Lines changed: 123 additions & 4 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default defineConfig({
3636
link: '/docs/api/google-map-api-loader',
3737
},
3838
{
39-
label: 'GoogleMap 🛠',
39+
label: 'GoogleMap',
4040
link: '/docs/api/google-map',
4141
},
4242
{

‎docs/src/components/api/GoogleMap/index.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { GoogleMap } from "react-google-map-wrapper";
2+
3+
import { Container } from "../../Container";
4+
5+
export function GoogleMapEx() {
6+
return (
7+
<Container>
8+
<GoogleMap
9+
// you can pass props to map container element.
10+
className='h-[400px]'
11+
containerProps={{
12+
id:'my-map'
13+
}}
14+
// map options
15+
zoom={16}
16+
center={{ lat: 37.5111158, lng: 127.098167 }}
17+
mapOptions={{
18+
mapTypeId: 'satellite',
19+
}}
20+
/>
21+
</Container>
22+
)
23+
}

‎docs/src/content/docs/docs/api/google-map-api-loader.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ title: GoogleMapApiLoader
33
description: description
44
---
55

6-
`GoogleMapApiLoader` is a React component for loading the Google Maps API.
6+
`<GoogleMapApiLoader />` component is used for load the Google Maps API.
77

88
### Basic Example
99

1010
```tsx
1111
function App() {
1212
return (
13-
<Suspense>
13+
<Suspense fallback={...}>
1414
<GoogleMapApiLoader
1515
apiKey='YOUR_API_KEY'
1616
suspense

‎docs/src/content/docs/docs/api/google-map.mdx‎

Lines changed: 97 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,100 @@ title: GoogleMap
33
description: description
44
---
55

6-
🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠
6+
import { GoogleMapEx } from '../../../../components/api/GoogleMap';
7+
8+
`<GoogleMap />` component is used for display <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map' target='_blank' rel='noreferrer'>Map</a> instance.
9+
10+
### Basic Example
11+
12+
```tsx
13+
function App() {
14+
return (
15+
<Suspense fallback={...}>
16+
<GoogleMapApiLoader
17+
apiKey='YOUR_API_KEY'
18+
suspense
19+
>
20+
<GoogleMap
21+
// map container element props
22+
className='h-[400px]'
23+
containerProps={{ id: 'my-map' }}
24+
// map options
25+
zoom={16}
26+
center={{ lat: 37.5111158, lng: 127.098167 }}
27+
mapOptions={{
28+
mapTypeId: 'satellite',
29+
}}
30+
/>
31+
</GoogleMapApiLoader>
32+
</Suspense>
33+
);
34+
}
35+
```
36+
37+
<GoogleMapEx client:only='react' />
38+
39+
### Props
40+
41+
| Props | Type | Description |
42+
| ----------- | ----------- | ----------- |
43+
| style | `HTMLAttributes<HTMLDivElement>['style']` | style props for map container element |
44+
| className | `HTMLAttributes<HTMLDivElement>['className']` | className props for map container element |
45+
| containerProps | `HTMLAttributes<HTMLDivElement>` | props object for map container element |
46+
| initialCenter | `google.maps.LatLng \| google.maps.LatLngLiteral` | initial Map center. |
47+
| initialZoom | `number` | initial Map zoom level. |
48+
| zoom | `number` | map zoom level. |
49+
| center | `google.maps.LatLng \| google.maps.LatLngLiteral` | map center coordiante. |
50+
| mapOptions | `google.maps.MapOptions` | options for map. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
51+
| onLoad | `(map: google.maps.Map) => void` | callback for map creating success |
52+
| onBoundsChanged | `(map: google.maps.Map) => void` | callback for `bounds_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
53+
| onCenterChanged | `(map: google.maps.Map) => void` | callback for `center_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
54+
| onClick | `(map: google.maps.Map, event: google.maps.MapMouseEvent \| google.maps.IconMouseEvent) => void` | callback for `click` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
55+
| onContextmenu | `(map: google.maps.Map, event: google.maps.MapMouseEvent) => void` | callback for `contextmenu` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
56+
| onDblclick | `(map: google.maps.Map, event: google.maps.MapMouseEvent) => void` | callback for `dblclick` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
57+
| onDrag | `(map: google.maps.Map) => void` | callback for `drag` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
58+
| onDragEnd | `(map: google.maps.Map) => void` | callback for `dragend` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
59+
| onDragStart | `(map: google.maps.Map) => void` | callback for `dragstart` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
60+
| onHeadingChanged | `(map: google.maps.Map) => void` | callback for `heading_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
61+
| onIdle | `(map: google.maps.Map) => void` | callback for `idle` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
62+
| onIsFractionalZoomEnabledChanged | `(map: google.maps.Map) => void` | callback for `isfractionalzoomenabled_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
63+
| onMapCapabilitiesChanged | `(map: google.maps.Map) => void` | callback for `mapcapabilities_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
64+
| onMapTypeIdChanged | `(map: google.maps.Map) => void` | callback for `maptypeid_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
65+
| onMouseMove | `(map: google.maps.Map, event: google.maps.MapMouseEvent) => void` | callback for `mousemove` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
66+
| onMouseOut | `(map: google.maps.Map, event: google.maps.MapMouseEvent) => void` | callback for `mouseout` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
67+
| onMouseOver | `(map: google.maps.Map, event: google.maps.MapMouseEvent) => void` | callback for `mouseover` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
68+
| onProjectionChanged | `(map: google.maps.Map) => void` | callback for `projection_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
69+
| onRenderingTypeChanged | `(map: google.maps.Map) => void` | callback for `renderingtype_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
70+
| onTilesLoaded | `(map: google.maps.Map) => void` | callback for `tilesloaded` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
71+
| onTiltChanged | `(map: google.maps.Map) => void` | callback for `tilt_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
72+
| onZoomChanged | `(map: google.maps.Map) => void` | callback for `zoom_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
73+
74+
### Access the Map Instance
75+
76+
You can access the map instance through three methods.
77+
78+
- 1. Event Callbacks (`onLoad` and others)
79+
- 2. `ref`
80+
- 3. `useMapContext`
81+
82+
```tsx
83+
const [map, setMap] = useState<google.maps.Map | null(null);
84+
<GoogleMap
85+
onLoad={(map) => setMap(map)}
86+
/>
87+
88+
/// or
89+
const mapRef = useRef<google.maps.Map>(null);
90+
<GoogleMap
91+
ref={mapRef}
92+
/>
93+
94+
/// or
95+
<GooelMap>
96+
<MyComponent />
97+
</GooelMap>
98+
99+
function MyComponent() {
100+
const map = useMapContext();
101+
}
102+
```

0 commit comments

Comments
 (0)