Skip to content

Commit ee065be

Browse files
pyjun01pyjun01
committed
docs: add examples
1 parent 68bf38f commit ee065be

8 files changed

Lines changed: 92 additions & 2 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,30 @@ export default defineConfig({
131131
label: 'Load the Maps JavaScript API',
132132
link: '/docs/examples/basic',
133133
},
134+
{
135+
label: 'Dark mode',
136+
link: '/docs/examples/dark-mode',
137+
},
138+
{
139+
label: 'Toggle Marker',
140+
link: '/docs/examples/toggle-marker',
141+
},
142+
{
143+
label: 'Rectangle editable',
144+
link: '/docs/examples/rectangle-editable',
145+
},
146+
{
147+
label: 'Put a hole in Polygon',
148+
link: '/docs/examples/put-a-hole-in-polygon',
149+
},
150+
{
151+
label: 'Inspect a Polyline',
152+
link: '/docs/examples/inspect-a-polyline',
153+
},
154+
{
155+
label: 'Interactive Advanced Marker',
156+
link: '/docs/examples/interactive-advanced-marker',
157+
},
134158
// {
135159
// label: 'Showing Pixel and Tile Coordinates',
136160
// link: '/docs/introdution',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ function Map() {
1515
<GoogleMap className='h-[400px]' zoom={17} center={{ lat: 37.5709413, lng: 126.977787 }}>
1616
<Marker lat={37.5709413} lng={126.977787} />
1717
</GoogleMap>
18-
)
18+
);
1919
}
2020

21-
export function App() {
21+
function App() {
2222
return (
2323
<Suspense fallback={<Fallback />}>
2424
<GoogleMapApiLoader apiKey='YOUR_API_KEY' suspense>

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

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

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

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

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)