docs: add Control content

Author: pyjun01

docs/astro.config.mjs

@@ -56,7 +56,7 @@ export default defineConfig({
                   link: '/docs/api/marker-clusterer',
                 },
                 {
-                  label: 'Control 🛠',
+                  label: 'Control',
                   link: '/docs/api/control',
                 },
                 {

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

@@ -0,0 +1,46 @@
+import { Control, CustomMarker, GoogleMap, useMapContext } from "react-google-map-wrapper";
+
+import { Container } from "../../Container";
+
+const center = { lat: 37.5111158, lng: 127.098167 };
+
+function MapContent() {
+  const map = useMapContext();
+
+  const handleButtonClick = () => {
+    map.setCenter(center);
+  }
+
+  return (
+    <Control position={google.maps.ControlPosition.TOP_CENTER}>
+      <button style={{
+        backgroundColor: '#fff',
+        border: '2px solid #fff',
+        borderRadius: '3px',
+        boxShadow: '0 2px 6px rgba(0,0,0,.3)',
+        color: 'rgb(25,25,25)',
+        cursor: 'pointer',
+        fontFamily: 'Roboto,Arial,sans-serif',
+        fontSize: '16px',
+        lineHeight: '38px',
+        margin: '8px 0 22px',
+        padding: '0 5px',
+        textAlign: 'center',
+      }} onClick={handleButtonClick}>Center Map</button>
+    </Control>
+  );
+}
+
+export function ControlEx() {
+  return (
+    <Container>
+      <GoogleMap
+        className='h-[400px]'
+        zoom={12}
+        center={center}
+      >
+        <MapContent />
+      </GoogleMap>
+    </Container>
+  )
+}

docs/src/content/docs/docs/api/control.mdx

@@ -3,4 +3,47 @@ title: Control
 description: description
 ---
 
-🛠🛠🛠 This documentation is currently in progress.  🛠🛠🛠
+import { ControlEx } from '../../../../components/api/Control';
+
+`<Control />` component is used for display custom controls that can be interacting with the user. for more detail, see <a href='https://developers.google.com/maps/documentation/javascript/controls#CustomControls' target='_blank' rel='noreferrer'>official google map documentation</a>.
+
+### Basic Example
+
+```tsx
+const center = { lat: 37.5111158, lng: 127.098167 };
+
+function MapContent() {
+  const map = useMapContext();
+
+  const handleButtonClick = () => {
+    map.setCenter(center);
+  }
+
+  return (
+    <Control position={google.maps.ControlPosition.TOP_CENTER}>
+      <button onClick={handleButtonClick}>Center Map</button>
+    </Control>
+  );
+}
+
+function MyMap() {
+  return (
+    <GoogleMap
+      className='h-[400px]'
+      center={center}
+      ...
+    >
+      <MapContent />
+    </GoogleMap>
+  )
+}
+```
+
+<ControlEx client:only='react' />
+
+### Props
+
+| Props | Type | Description |
+| ----------- | ----------- | ----------- |
+| poistion | `google.maps.ControlPosition` | position of control element |
+| ... | `HTMLAttributes<HTMLDivElement>` | props except `position` are passed to the `<div>` container. |