docs: add content

Author: pyjun01

docs/astro.config.mjs

@@ -60,29 +60,29 @@ export default defineConfig({
                   link: '/docs/api/control',
                 },
                 {
-                  label: 'InfoWindow 🛠',
+                  label: 'InfoWindow',
                   link: '/docs/api/info-window',
                 },
                 {
-                  label: 'Polyline 🛠',
+                  label: 'Polyline',
                   link: '/docs/api/polyline',
                 },
                 {
-                  label: 'Polygon 🛠',
+                  label: 'Polygon',
                   link: '/docs/api/polygon',
                 },
                 {
-                  label: 'Rectangle 🛠',
+                  label: 'Rectangle',
                   link: '/docs/api/rectangle',
                 },
                 {
-                  label: 'Circle 🛠',
+                  label: 'Circle',
                   link: '/docs/api/circle',
                 },
                 {
-                  label: 'HeatmapLayer 🛠',
+                  label: 'HeatmapLayer',
                   link: '/docs/api/heatmap-layer',
-                }
+                },
               ],
             },
             {

docs/package-lock.json

@@ -19,7 +19,7 @@
     "astro": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-google-map-wrapper": "^0.0.1-beta.7",
+    "react-google-map-wrapper": "^0.0.1-beta.9",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.3.3"

docs/package.json

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export function ControlButton(props: HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      className='h-[40px] bg-white rounded-[3px] text-[rgb(25,25,25)] cursor-pointer text-base m-[8xp_0_22px] p-[8px_17px] text-center'
+      {...props}
+    />
+  );
+}

docs/src/components/ControlButton.tsx

@@ -0,0 +1,54 @@
+import { GoogleMap, Circle } from "react-google-map-wrapper";
+
+import { Container } from "../../Container";
+
+const cityList = [
+  {
+    name: 'chicago',
+    center: { lat: 41.878, lng: -87.629 },
+    population: 2714856,
+  },
+  {
+    name: 'newyork',
+    center: { lat: 40.714, lng: -74.005 },
+    population: 8405837,
+  },
+  {
+    name: 'losangeles',
+    center: { lat: 34.052, lng: -118.243 },
+    population: 3857799,
+  },
+   {
+    name: 'vancouver',
+    center: { lat: 49.25, lng: -123.1 },
+    population: 603502,
+  },
+];
+
+export function CircleEx() {
+  return (
+    <Container>
+      <GoogleMap
+        className='h-[400px]'
+        initialZoom={4}
+        initialCenter={{ lat: 37.09, lng: -95.712 }}
+        mapOptions={{
+          mapTypeId: "terrain",
+        }}
+      >
+        {cityList.map(({ name, center, population }) => (
+          <Circle
+            key={name}
+            strokeColor="#FF0000"
+            strokeOpacity={0.8}
+            strokeWeight={2}
+            fillColor="#FF0000"
+            fillOpacity={0.35}
+            center={center}
+            radius={Math.sqrt(population) * 100}
+          />
+        ))}
+      </GoogleMap>
+    </Container>
+  );
+}

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

@@ -1,6 +1,7 @@
-import { Control, CustomMarker, GoogleMap, useMapContext } from "react-google-map-wrapper";
+import { Control, CustomMarker, GoogleMap, useMapContext } from 'react-google-map-wrapper';
 
-import { Container } from "../../Container";
+import { Container } from '../../Container';
+import { ControlButton } from '../../ControlButton';
 
 const center = { lat: 37.5111158, lng: 127.098167 };
 
@@ -9,38 +10,21 @@ function MapContent() {
 
   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 className='m-[10px]' position={google.maps.ControlPosition.TOP_CENTER}>
+      <ControlButton onClick={handleButtonClick}>Center Map</ControlButton>
     </Control>
   );
 }
 
 export function ControlEx() {
   return (
     <Container>
-      <GoogleMap
-        className='h-[400px]'
-        zoom={12}
-        center={center}
-      >
+      <GoogleMap className='h-[400px]' zoom={12} center={center}>
         <MapContent />
       </GoogleMap>
     </Container>
-  )
+  );
 }