diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 2c45bd9..4513af5 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -40,7 +40,7 @@ export default defineConfig({ link: '/docs/api/google-map', }, { - label: 'Marker 🛠', + label: 'Marker', link: '/docs/api/marker', }, { diff --git a/docs/src/components/api/Marker/index.tsx b/docs/src/components/api/Marker/index.tsx new file mode 100644 index 0000000..98b9938 --- /dev/null +++ b/docs/src/components/api/Marker/index.tsx @@ -0,0 +1,26 @@ +import { GoogleMap, Marker } from "react-google-map-wrapper"; + +import { Container } from "../../Container"; + +export function MarkerEx() { + return ( + + + + + + + ) +} diff --git a/docs/src/content/docs/docs/api/marker.mdx b/docs/src/content/docs/docs/api/marker.mdx index 02b1260..a2783ec 100644 --- a/docs/src/content/docs/docs/api/marker.mdx +++ b/docs/src/content/docs/docs/api/marker.mdx @@ -3,4 +3,81 @@ title: Marker description: description --- -🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠 \ No newline at end of file +import { MarkerEx } from '../../../../components/api/Marker'; + +`` component is used for display Marker. + +### Basic Example + +```tsx +function MyMap() { + return ( + + + {/* draggable */} + + + ); +} +``` + + + +### Props + +| Props | Type | Description | +| ----------- | ----------- | ----------- | +| lat | `number` | latitude | +| lng | `number` | longitude | +| draggable | `boolean` | flag for draggable feature | +| anchorPoint | `google.maps.Point` | Please refer to the official documentation. | +| animation | `google.maps.Animation` | Please refer to the official documentation. | +| clickable | `boolean` | Please refer to the official documentation. | +| collisionBehavior | `string` | Please refer to the official documentation. | +| crossOnDrag | `boolean` | Please refer to the official documentation. | +| cursor | `string` | Please refer to the official documentation. | +| draggable | `boolean` | Please refer to the official documentation. | +| icon | `string \| google.maps.Icon \|google.maps.Symbol` | Please refer to the official documentation. | +| label | `string \| google.maps.MarkerLabel` | Please refer to the official documentation. | +| opacity | `number` | Please refer to the official documentation. | +| optimized | `boolean` | Please refer to the official documentation. | +| shape | `google.maps.MarkerShape` | Please refer to the official documentation. | +| title | `string` | Please refer to the official documentation. | +| visible | `boolean` | Please refer to the official documentation. | +| zIndex | `number` | Please refer to the official documentation. | +| onAnimationChanged | `(marker: google.maps.Marker) => void` | callback for `animation_changed` event. Please refer to the official documentation. | +| onClick | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `click` event. Please refer to the official documentation. | +| onClickableChanged | `(marker: google.maps.Marker) => void` | callback for `clickable_changed` event. Please refer to the official documentation. | +| onContextMenu | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `contextmenu` event. Please refer to the official documentation. | +| onCursorChanged | `(marker: google.maps.Marker) => void` | callback for `cursor_changed` event. Please refer to the official documentation. | +| onDblClick | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dblclick` event. Please refer to the official documentation. | +| onDrag | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `drag` event. Please refer to the official documentation. | +| onDragEnd | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dragend` event. Please refer to the official documentation. | +| onDraggableChanged | `(marker: google.maps.Marker) => void` | callback for `draggable_changed` event. Please refer to the official documentation. | +| onDragStart | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `dragstart` event. Please refer to the official documentation. | +| onFlatChanged | `(marker: google.maps.Marker) => void` | callback for `flat_changed` event. Please refer to the official documentation. | +| onIconChanged | `(marker: google.maps.Marker) => void` | callback for `icon_changed` event. Please refer to the official documentation. | +| onMouseDown | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mousedown` event. Please refer to the official documentation. | +| onMouseOut | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseout` event. Please refer to the official documentation. | +| onMouseOver | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseover` event. Please refer to the official documentation. | +| onMouseUp | `(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void` | callback for `mouseup` event. Please refer to the official documentation. | +| onPositionChanged | `(marker: google.maps.Marker) => void` | callback for `position_changed` event. Please refer to the official documentation. | +| onShapeChanged | `(marker: google.maps.Marker) => void` | callback for `shape_changed` event. Please refer to the official documentation. | +| onTitleChanged | `(marker: google.maps.Marker) => void` | callback for `title_changed` event. Please refer to the official documentation. | +| onVisibleChanged | `(marker: google.maps.Marker) => void` | callback for `visible_changed` event. Please refer to the official documentation. | +| onZindexChanged | `(marker: google.maps.Marker) => void` | callback for `zindex_changed` event. Please refer to the official documentation. | + +### 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).