docs: add CustomMarker content

Author: pyjun01

docs/astro.config.mjs

@@ -44,7 +44,7 @@ export default defineConfig({
                   link: '/docs/api/marker',
                 },
                 {
-                  label: 'CustomMarker 🛠',
+                  label: 'CustomMarker',
                   link: '/docs/api/custom-marker',
                 },
                 {

docs/src/components/api/CustomMarker/index.tsx

@@ -0,0 +1,33 @@
+import { CustomMarker, GoogleMap } from "react-google-map-wrapper";
+
+import { Container } from "../../Container";
+
+export function CustomMarkerEx() {
+  return (
+    <Container>
+      <GoogleMap
+        className='h-[400px]'
+        containerProps={{
+          id:'my-map'
+        }}
+        zoom={13}
+        center={{ lat: 37.5111158, lng: 127.098167 }}
+        mapOptions={{
+          mapTypeId: 'satellite',
+        }}
+      >
+        <CustomMarker lat={37.5111158} lng={127.098167}>
+          <div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
+            $ 2.5
+          </div>
+        </CustomMarker>
+        {/* draggable */}
+        <CustomMarker lat={37.5111158} lng={127.05} draggable>
+          <div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
+            $ 2.5 (draggable)
+          </div>
+        </CustomMarker>
+      </GoogleMap>
+    </Container>
+  )
+}

docs/src/content/docs/docs/api/custom-marker.mdx

@@ -3,4 +3,49 @@ title: CustomMarker
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+import { CustomMarkerEx } from '../../../../components/api/CustomMarker';
+
+`<CustomMarker />` component is used for display Maker with Custom React Element.
+
+### Basic Example
+
+```tsx
+function MyMap() {
+  return (
+    <GoogleMap
+      center={{ lat: 37.5111158, lng: 127.098167 }}
+      {...}
+    >
+      <CustomMarker lat={37.5111158} lng={127.098167}>
+        <div className='px-5 py-3 rounded bg-white text-lg text-black'>
+          $ 2.5
+        </div>
+      </CustomMarker>
+      {/* draggable */}
+      <CustomMarker lat={37.5111158} lng={127.05} draggable>
+        <div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
+          $ 2.5 (draggable)
+        </div>
+      </CustomMarker>
+    </GoogleMap>
+  );
+}
+```
+
+<CustomMarkerEx client:only='react' />
+
+### Props
+
+| Props | Type | Description |
+| ----------- | ----------- | ----------- |
+| lat | `number` | latitude |
+| lng | `number` | longitude |
+| draggable | `boolean` | flag for draggable feature |
+| preventDragOnClickable | `boolean` | prevent drag event on clickable element. (e.g. a tag, button tag) |
+| onDragStart | `(position: google.maps.LatLngLiteral) => void` | callback for `dragstart` event. |
+| onDrag | `(position: google.maps.LatLngLiteral) => void` | callback for `drag` event. |
+| onDragEnd | `(position: google.maps.LatLngLiteral) => void` | callback for `dragend` event. |
+
+### Alternative
+
+You can also display custom element with [AdvancedMarker](/react-google-map-wrapper/docs/api/advanced-marker).