docs: add examples

docs/astro.config.mjs

@@ -131,6 +131,30 @@ export default defineConfig({
                   label: 'Load the Maps JavaScript API',
                   link: '/docs/examples/basic',
                 },
+                {
+                  label: 'Dark mode',
+                  link: '/docs/examples/dark-mode',
+                },
+                {
+                  label: 'Toggle Marker',
+                  link: '/docs/examples/toggle-marker',
+                },
+                {
+                  label: 'Rectangle editable',
+                  link: '/docs/examples/rectangle-editable',
+                },
+                {
+                  label: 'Put a hole in Polygon',
+                  link: '/docs/examples/put-a-hole-in-polygon',
+                },
+                {
+                  label: 'Inspect a Polyline',
+                  link: '/docs/examples/inspect-a-polyline',
+                },
+                {
+                  label: 'Interactive Advanced Marker',
+                  link: '/docs/examples/interactive-advanced-marker',
+                },
                 // {
                 //   label: 'Showing Pixel and Tile Coordinates',
                 //   link: '/docs/introdution',

docs/src/content/docs/docs/examples/basic.mdx

@@ -15,10 +15,10 @@ function Map() {
     <GoogleMap className='h-[400px]' zoom={17} center={{ lat: 37.5709413, lng: 126.977787 }}>
       <Marker lat={37.5709413} lng={126.977787} />
     </GoogleMap>
-  )
+  );
 }
 
-export function App() {
+function App() {
   return (
     <Suspense fallback={<Fallback />}>
       <GoogleMapApiLoader apiKey='YOUR_API_KEY' suspense>

docs/src/content/docs/docs/examples/dark-mode.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Dark mode'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/79l3gq?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="react-google-map-wrapper-dark-mode"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

docs/src/content/docs/docs/examples/inspect-a-polyline.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Inspect a Polyline'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/s4vxrp?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="react-google-map-wrapper-inspect-a-polyline"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

docs/src/content/docs/docs/examples/interactive-advanced-marker.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Interactive Advanced Marker'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/rg9gzd?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
+  style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+  title="react-google-map-wrapper-interactive-advanced-marker"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>

docs/src/content/docs/docs/examples/put-a-hole-in-polygon.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Put a hole in Polygon'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/6rc5ky?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="react-google-map-wrapper-put-a-hole-in-polygon"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

docs/src/content/docs/docs/examples/rectangle-editable.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Rectangle editable'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/ttyrq9?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="react-google-map-wrapper-rectangle-editable"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

docs/src/content/docs/docs/examples/toggle-marker.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Example: Toggle Marker'
+description: 'description'
+---
+
+<iframe src="https://codesandbox.io/embed/5jlqxl?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="react-google-map-wrapper-removing-markers"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>