Skip to content

Commit 908b141

Browse files
pyjun01pyjun01
committed
docs: add Marker content
1 parent eaaae44 commit 908b141

3 files changed

Lines changed: 105 additions & 2 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default defineConfig({
4040
link: '/docs/api/google-map',
4141
},
4242
{
43-
label: 'Marker 🛠',
43+
label: 'Marker',
4444
link: '/docs/api/marker',
4545
},
4646
{

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { GoogleMap, Marker } from "react-google-map-wrapper";
2+
3+
import { Container } from "../../Container";
4+
5+
export function MarkerEx() {
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+
<Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
22+
<Marker lat={37.5111158} lng={127.096167} title={'I\'m draggable'} draggable />
23+
</GoogleMap>
24+
</Container>
25+
)
26+
}

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

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,81 @@ title: Marker
33
description: description
44
---
55

6-
🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠
6+
import { MarkerEx } from '../../../../components/api/Marker';
7+
8+
`<Marker />` component is used for display <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker' target='_blank' rel='noreferrer'>Marker</a>.
9+
10+
### Basic Example
11+
12+
```tsx
13+
function MyMap() {
14+
return (
15+
<GoogleMap
16+
center={{ lat: 37.5111158, lng: 127.098167 }}
17+
{...}
18+
>
19+
<Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
20+
{/* draggable */}
21+
<Marker lat={37.5111158} lng={127.096167} title={'I\'m draggable'} draggable />
22+
</GoogleMap>
23+
);
24+
}
25+
```
26+
27+
<MarkerEx client:only='react' />
28+
29+
### Props
30+
31+
| Props | Type | Description |
32+
| ----------- | ----------- | ----------- |
33+
| lat | `number` | latitude |
34+
| lng | `number` | longitude |
35+
| draggable | `boolean` | flag for draggable feature |
36+
| anchorPoint | `google.maps.Point` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
37+
| animation | `google.maps.Animation` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
38+
| clickable | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
39+
| collisionBehavior | `string` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
40+
| crossOnDrag | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
41+
| cursor | `string` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
42+
| draggable | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
43+
| icon | `string \| google.maps.Icon \|google.maps.Symbol` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
44+
| label | `string \| google.maps.MarkerLabel` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
45+
| opacity | `number` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
46+
| optimized | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
47+
| shape | `google.maps.MarkerShape` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
48+
| title | `string` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
49+
| visible | `boolean` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
50+
| zIndex | `number` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions' target='_blank' rel='noreferrer'>official documentation</a>. |
51+
| onAnimationChanged | `(marker: google.maps.Marker) => void` | callback for `animation_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
52+
| onClick | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `click` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
53+
| onClickableChanged | `(marker: google.maps.Marker) => void` | callback for `clickable_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
54+
| onContextMenu | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `contextmenu` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
55+
| onCursorChanged | `(marker: google.maps.Marker) => void` | callback for `cursor_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
56+
| onDblClick | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dblclick` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
57+
| onDrag | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `drag` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
58+
| onDragEnd | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dragend` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
59+
| onDraggableChanged | `(marker: google.maps.Marker) => void` | callback for `draggable_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
60+
| onDragStart | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dragstart` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
61+
| onFlatChanged | `(marker: google.maps.Marker) => void` | callback for `flat_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
62+
| onIconChanged | `(marker: google.maps.Marker) => void` | callback for `icon_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
63+
| onMouseDown | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mousedown` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
64+
| onMouseOut | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseout` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
65+
| onMouseOver | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseover` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
66+
| onMouseUp | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseup` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
67+
| onPositionChanged | `(marker: google.maps.Marker) => void` | callback for `position_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
68+
| onShapeChanged | `(marker: google.maps.Marker) => void` | callback for `shape_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
69+
| onTitleChanged | `(marker: google.maps.Marker) => void` | callback for `title_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
70+
| onVisibleChanged | `(marker: google.maps.Marker) => void` | callback for `visible_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
71+
| onZindexChanged | `(marker: google.maps.Marker) => void` | callback for `zindex_changed` event. Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events' target='_blank' rel='noreferrer'>official documentation</a>. |
72+
73+
### Render custom HTML Marker
74+
75+
Please refer to [CustomMarker page](/react-google-map-wrapper/docs/api/custom-marker).
76+
77+
### Conenct to the InfoWindow
78+
79+
Please refer to [InfoWindow page](/react-google-map-wrapper/docs/api/info-window).
80+
81+
### Marker Clustering
82+
83+
Please refer to [MarkerClusterer page](/react-google-map-wrapper/docs/api/marker-clusterer).

0 commit comments

Comments
 (0)