Skip to content

Commit

Permalink
docs: add Marker content
Browse files Browse the repository at this point in the history
  • Loading branch information
@pyjun01
pyjun01 committed Dec 12, 2023
1 parent eaaae44 commit 908b141
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default defineConfig({
link: '/docs/api/google-map',
},
{
label: 'Marker 🛠',
label: 'Marker',
link: '/docs/api/marker',
},
{
Expand Down
26 changes: 26 additions & 0 deletions docs/src/components/api/Marker/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { GoogleMap, Marker } from "react-google-map-wrapper";

import { Container } from "../../Container";

export function MarkerEx() {
return (
<Container>
<GoogleMap
// you can pass props to map container element.
className='h-[400px]'
containerProps={{
id:'my-map'
}}
// map options
zoom={16}
center={{ lat: 37.5111158, lng: 127.098167 }}
mapOptions={{
mapTypeId: 'satellite',
}}
>
<Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
<Marker lat={37.5111158} lng={127.096167} title={'I\'m draggable'} draggable />
</GoogleMap>
</Container>
)
}
79 changes: 78 additions & 1 deletion docs/src/content/docs/docs/api/marker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,81 @@ title: Marker
description: description
---

🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠
import { MarkerEx } from '../../../../components/api/Marker';

`<Marker />` component is used for display <a href='https://developers.google.com/maps/documentation/javascript/reference/marker#Marker' target='_blank' rel='noreferrer'>Marker</a>.

### Basic Example

```tsx
function MyMap() {
return (
<GoogleMap
center={{ lat: 37.5111158, lng: 127.098167 }}
{...}
>
<Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
{/* draggable */}
<Marker lat={37.5111158} lng={127.096167} title={'I\'m draggable'} draggable />
</GoogleMap>
);
}
```

<MarkerEx client:only='react' />

### Props

| Props | Type | Description |
| ----------- | ----------- | ----------- |
| lat | `number` | latitude |
| lng | `number` | longitude |
| draggable | `boolean` | flag for draggable feature |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |
| 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>. |

### Render custom HTML Marker

Please refer to [CustomMarker page](/react-google-map-wrapper/docs/api/custom-marker).

### Conenct to the InfoWindow

Please refer to [InfoWindow page](/react-google-map-wrapper/docs/api/info-window).

### Marker Clustering

Please refer to [MarkerClusterer page](/react-google-map-wrapper/docs/api/marker-clusterer).

0 comments on commit 908b141

Please sign in to comment.