Skip to content

Commit 3450315

Browse files
pyjun01pyjun01
committed
docs: add AdvancedMarker content
1 parent ff7c977 commit 3450315

4 files changed

Lines changed: 128 additions & 13 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,9 @@ export default defineConfig({
4848
link: '/docs/api/custom-marker',
4949
},
5050
{
51-
label: 'AdvancedMarker 🛠',
51+
label: 'AdvancedMarker (w/ PinElement)',
5252
link: '/docs/api/advanced-marker',
5353
},
54-
{
55-
label: 'PinElement 🛠',
56-
link: '/docs/api/pin-element',
57-
},
5854
{
5955
label: 'MarkerClusterer 🛠',
6056
link: '/docs/api/marker-clusterer',

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { AdvancedMarker, GoogleMap, PinElement } from "react-google-map-wrapper";
2+
3+
import { Container } from "../../Container";
4+
5+
export function AdvancedMarkerEx() {
6+
return (
7+
<Container>
8+
<GoogleMap
9+
className='h-[400px]'
10+
containerProps={{
11+
id:'my-map'
12+
}}
13+
zoom={13}
14+
center={{ lat: 37.39, lng: -122.05 }}
15+
mapOptions={{
16+
mapId: 'DEMO_MAP_ID',
17+
}}
18+
>
19+
<AdvancedMarker lat={37.4} lng={-122.07}>
20+
<PinElement scale={1.5} />
21+
</AdvancedMarker>
22+
<AdvancedMarker lat={37.38} lng={-122.07}>
23+
<PinElement background='#FBBC04' />
24+
</AdvancedMarker>
25+
<AdvancedMarker lat={37.4} lng={-122.05}>
26+
<PinElement borderColor={'#137333'} />
27+
</AdvancedMarker>
28+
<AdvancedMarker lat={37.38} lng={-122.05}>
29+
<PinElement glyphColor={'white'} />
30+
</AdvancedMarker>
31+
<AdvancedMarker lat={37.4} lng={-122.03}>
32+
<PinElement glyph='' />
33+
</AdvancedMarker>
34+
<AdvancedMarker lat={37.38} lng={-122.03}>
35+
<img src='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' />
36+
</AdvancedMarker>
37+
<AdvancedMarker lat={37.39} lng={-122.05}>
38+
<div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
39+
whole new marker content.
40+
</div>
41+
</AdvancedMarker>
42+
</GoogleMap>
43+
</Container>
44+
)
45+
}

‎docs/src/content/docs/docs/api/advanced-marker.mdx‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,86 @@
11
---
2-
title: AdvancedMarker
2+
title: AdvancedMarker (w/ PinElement)
33
description: description
44
---
55

6-
🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠
6+
import { AdvancedMarkerEx } from '../../../../components/api/AdvancedMarker';
7+
8+
> Before using advanced markers, you need a Cloud project with a billing account, and the Maps JavaScript API enabled. To learn more, see <a href='https://developers.google.com/maps/documentation/javascript/advanced-markers/start#get_an_api_key_and_enable_the' target='_blank' rel='noreferrer'>official document</a>.
9+
10+
`<AdvancedMarker />` component is used for display customize highly performant markers. You can customize default marker's background, border, etc... or replace marker icon with custom react element.
11+
12+
### Basic Example
13+
14+
```tsx
15+
function MyMap() {
16+
return (
17+
<GoogleMap
18+
className='h-[400px]'
19+
mapOptions={{
20+
mapId: 'YOUR_MAP_ID',
21+
}}
22+
...
23+
>
24+
<AdvancedMarker lat={37.4} lng={-122.07}>
25+
<PinElement scale={1.5} />
26+
</AdvancedMarker>
27+
<AdvancedMarker lat={37.38} lng={-122.07}>
28+
<PinElement background='#FBBC04' />
29+
</AdvancedMarker>
30+
<AdvancedMarker lat={37.4} lng={-122.05}>
31+
<PinElement borderColor={'#137333'} />
32+
</AdvancedMarker>
33+
<AdvancedMarker lat={37.38} lng={-122.05}>
34+
<PinElement glyphColor={'white'} />
35+
</AdvancedMarker>
36+
<AdvancedMarker lat={37.4} lng={-122.03}>
37+
<PinElement glyph='' />
38+
</AdvancedMarker>
39+
<AdvancedMarker lat={37.38} lng={-122.03}>
40+
<img src='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' />
41+
</AdvancedMarker>
42+
<AdvancedMarker lat={37.39} lng={-122.05}>
43+
<div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
44+
whole new marker content.
45+
</div>
46+
</AdvancedMarker>
47+
</GoogleMap>
48+
);
49+
}
50+
```
51+
52+
<AdvancedMarkerEx client:only='react' />
53+
54+
### Props
55+
56+
| Props | Type | Description |
57+
| ----------- | ----------- | ----------- |
58+
| lat | `number` | latitude |
59+
| lng | `number` | longitude |
60+
| content | `Node` | we recommend passing marker content to `children`, but you can also pass marker content manually using `content` props. |
61+
| hidden | `boolean` | if flag is set to `true`, marker will not be displayed on the map. |
62+
| collisionBehavior | `google.maps.CollisionBehavior` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/advanced-markers/collision-behavior' target='_blank' rel='noreferrer'>official documentation</a>. |
63+
| gmpDraggable | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/advanced-markers/accessible-markers' target='_blank' rel='noreferrer'>official documentation</a>. |
64+
| title | `string` | ... |
65+
| zIndex | `number` | ... |
66+
| onClick | `(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void` | callback for `click` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
67+
| onDrag | `(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void` | callback for `drag` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
68+
| onDragEnd | `(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void` | callback for `dragend` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
69+
| onDragStart | `(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void` | callback for `drag_start` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
70+
| onGmpClick | `(marker: google.maps.marker.AdvancedMarkerElement, evnet: google.maps.marker.AdvancedMarkerClickEvent) => void` | callback for `gmp_click` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
71+
72+
### PinElement
73+
74+
`<PinElement />` component is used for customize default marker's background, borderColor, glyph, glyphColor, scale.
75+
76+
https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement
77+
78+
#### Props
79+
80+
| Props | Type | Description |
81+
| ----------- | ----------- | ----------- |
82+
| background | `string` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement-Properties' target='_blank' rel='noreferrer'>official documentation</a>. |
83+
| borderColor | `string` | ... |
84+
| glyph | `string\|Element\|URL` | ... |
85+
| glyphColor | `string` | ... |
86+
| scale | `number` | ... |

‎docs/src/content/docs/docs/api/pin-element.mdx‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)