Skip to content

Commit 0298a6b

Browse files
pyjun01pyjun01
committed
docs: add MarkerClusterer content
1 parent b3d7e2c commit 0298a6b

4 files changed

Lines changed: 129 additions & 3 deletions

File tree

‎docs/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default defineConfig({
5252
link: '/docs/api/advanced-marker',
5353
},
5454
{
55-
label: 'MarkerClusterer 🛠',
55+
label: 'MarkerClusterer',
5656
link: '/docs/api/marker-clusterer',
5757
},
5858
{

‎docs/src/components/api/MarkerClusterer/index.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { AdvancedMarker, GoogleMap, Marker, MarkerClusterer, PinElement } from "react-google-map-wrapper";
2+
3+
import { Container } from "../../Container";
4+
5+
const locations = [
6+
{ lat: -31.56391, lng: 147.154312 },
7+
{ lat: -33.718234, lng: 150.363181 },
8+
{ lat: -33.727111, lng: 150.371124 },
9+
{ lat: -33.848588, lng: 151.209834 },
10+
{ lat: -33.851702, lng: 151.216968 },
11+
{ lat: -34.671264, lng: 150.863657 },
12+
{ lat: -35.304724, lng: 148.662905 },
13+
{ lat: -36.817685, lng: 175.699196 },
14+
{ lat: -36.828611, lng: 175.790222 },
15+
{ lat: -37.75, lng: 145.116667 },
16+
{ lat: -37.759859, lng: 145.128708 },
17+
{ lat: -37.765015, lng: 145.133858 },
18+
{ lat: -37.770104, lng: 145.143299 },
19+
{ lat: -37.7737, lng: 145.145187 },
20+
{ lat: -37.774785, lng: 145.137978 },
21+
{ lat: -37.819616, lng: 144.968119 },
22+
{ lat: -38.330766, lng: 144.695692 },
23+
{ lat: -39.927193, lng: 175.053218 },
24+
{ lat: -41.330162, lng: 174.865694 },
25+
{ lat: -42.734358, lng: 147.439506 },
26+
{ lat: -42.734358, lng: 147.501315 },
27+
{ lat: -42.735258, lng: 147.438 },
28+
{ lat: -43.999792, lng: 170.463352 },
29+
];
30+
31+
export function MarkerClustererEx() {
32+
return (
33+
<Container>
34+
<GoogleMap
35+
className='h-[400px]'
36+
containerProps={{
37+
id:'my-map'
38+
}}
39+
zoom={3}
40+
center={{ lat: -28.024, lng: 140.887 }}
41+
mapOptions={{
42+
mapId: 'DEMO_MAP_ID',
43+
}}
44+
>
45+
<MarkerClusterer>
46+
{locations.map(({ lat, lng }, i) => (
47+
<Marker
48+
key={i}
49+
lat={lat}
50+
lng={lng}
51+
/>
52+
))}
53+
</MarkerClusterer>
54+
</GoogleMap>
55+
</Container>
56+
)
57+
}

‎docs/src/content/docs/docs/api/advanced-marker.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,6 @@ https://developers.google.com/maps/documentation/javascript/reference/advanced-m
8181
| ----------- | ----------- | ----------- |
8282
| background | `string` | Please refer to the <a href='https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement-Properties' target='_blank' rel='noreferrer'>official documentation</a>. |
8383
| borderColor | `string` | ... |
84-
| glyph | `string\|Element\|URL` | ... |
84+
| glyph | `string \| Element \| URL` | ... |
8585
| glyphColor | `string` | ... |
8686
| scale | `number` | ... |

‎docs/src/content/docs/docs/api/marker-clusterer.mdx‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,73 @@ title: MarkerClusterer
33
description: description
44
---
55

6-
🛠🛠🛠 This documentation is currently in progress. 🛠🛠🛠
6+
import { MarkerClustererEx } from '../../../../components/api/MarkerClusterer';
7+
8+
`<MarkerClusterer />` component is used for combine markers of close proximity into clusters, and simplify the display of markers on the map.
9+
10+
`MarkerClusterer` is based on <a href='https://www.npmjs.com/package/@googlemaps/markerclusterer' target='_blank' rel='noreferrer'>@googlemaps/markerclusterer</a>. for more detail, see ~our MarkerClusterer example~ or <a href='https://googlemaps.github.io/js-markerclusterer' target='_blank' rel='noreferrer'>official library documentation</a>.
11+
12+
### Basic Example
13+
14+
```tsx
15+
const locations = [
16+
{ lat: -31.56391, lng: 147.154312 },
17+
{ lat: -33.718234, lng: 150.363181 },
18+
{ lat: -33.727111, lng: 150.371124 },
19+
{ lat: -33.848588, lng: 151.209834 },
20+
{ lat: -33.851702, lng: 151.216968 },
21+
{ lat: -34.671264, lng: 150.863657 },
22+
{ lat: -35.304724, lng: 148.662905 },
23+
{ lat: -36.817685, lng: 175.699196 },
24+
{ lat: -36.828611, lng: 175.790222 },
25+
{ lat: -37.75, lng: 145.116667 },
26+
{ lat: -37.759859, lng: 145.128708 },
27+
{ lat: -37.765015, lng: 145.133858 },
28+
{ lat: -37.770104, lng: 145.143299 },
29+
{ lat: -37.7737, lng: 145.145187 },
30+
{ lat: -37.774785, lng: 145.137978 },
31+
{ lat: -37.819616, lng: 144.968119 },
32+
{ lat: -38.330766, lng: 144.695692 },
33+
{ lat: -39.927193, lng: 175.053218 },
34+
{ lat: -41.330162, lng: 174.865694 },
35+
{ lat: -42.734358, lng: 147.439506 },
36+
{ lat: -42.734358, lng: 147.501315 },
37+
{ lat: -42.735258, lng: 147.438 },
38+
{ lat: -43.999792, lng: 170.463352 },
39+
];
40+
41+
function MyMap() {
42+
return (
43+
<GoogleMap
44+
zoom={3}
45+
center={{ lat: -28.024, lng: 140.887 }}
46+
{...}
47+
>
48+
<MarkerClusterer>
49+
{locations.map(({ lat, lng }, i) => (
50+
<Marker
51+
key={i}
52+
lat={lat}
53+
lng={lng}
54+
/>
55+
))}
56+
</MarkerClusterer>
57+
</GoogleMap>
58+
);
59+
}
60+
```
61+
62+
<MarkerClustererEx client:only='react' />
63+
64+
### Props
65+
66+
> props are the same as <a href='https://github.com/googlemaps/js-markerclusterer/blob/main/src/markerclusterer.ts#L32-L48' target='_blank' rel='noreferrer'>MarkerClustererOptions</a>. (`map` and `markers` are automatically filled)
67+
68+
we highly recommend memorizing props. If you don't, `MarkerClusterer` will be re-created every time.
69+
70+
| Props | Type | Description |
71+
| ----------- | ----------- | ----------- |
72+
| algorithmOptions | `AlgorithmOptions` | An options for Algorithm. |
73+
| algorithm | `Algorithm` | An algorithm to cluster markers. Default is <a href='https://googlemaps.github.io/js-markerclusterer/classes/SuperClusterAlgorithm.html' target='_blank' rel='noreferrer'>SuperClusterAlgorithm</a>. |
74+
| renderer | `Renderer` | An object that converts a Cluster into a `google.maps.Marker`. |
75+
| onClusterClick | `(event: google.maps.MapMouseEvent, cluster: Cluster, map: google.maps.Map) => void` | callback for `click` evnet. |

0 commit comments

Comments
 (0)