# How to implement a custom Google Maps (or view the native map source code)

**URL:** <https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665>\
**Category:** How do I?\
**Created:** [October 1, 2026, 1:57am UTC](https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665 "2026-10-01T01:57:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![danlisboa](https://avatars.discourse-cdn.com/v4/letter/d/41988e/32.png) [@danlisboa](https://community.weweb.io/u/danlisboa)\
**Post date:** [October 1, 2026, 1:57am UTC](https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665/1 "2026-10-01T01:57:48Z")

</div>

Hi everyone,

I’m trying to implement a custom Google Maps in my WeWeb app to use features like Marker Clustering and a few others, but I haven’t been successful so far.

Does anyone have a working code snippet they could share?

Alternatively, is it possible to get the source code of the native WeWeb Map component? It works perfectly fine out of the box, so seeing how it was built would really help me create my custom version with the missing functions.

Thanks!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 1, 2026, 11:24am UTC](https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665/2 "2026-10-01T11:24:22Z")

</div>

Hey @danlisboa 👋

I’d recommend forking the element and asking AI to work on it:  
 ![CleanShot 2026-10-01 at 13.23.29](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/3X/c/b/cbdb3bb7b808772ffd3a657ca2223070b8e5d64a.gif)

---

<div class="post-metadata">

**Author:** ![iconic](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/iconic/32/14103_2.png) [@iconic](https://community.weweb.io/u/iconic)\
**Post date:** [October 1, 2026, 12:05pm UTC](https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665/3 "2026-10-01T12:05:23Z")

</div>

you can go to weweb github and find the map component there, or just fork it in the editor.

---

<div class="post-metadata">

**Author:** ![wu\_emma](https://avatars.discourse-cdn.com/v4/letter/w/c57346/32.png) [@wu\_emma](https://community.weweb.io/u/wu_emma)\
**Post date:** [October 14, 2026, 6:41pm UTC](https://community.weweb.io/t/how-to-implement-a-custom-google-maps-or-view-the-native-map-source-code/21665/4 "2026-10-14T18:41:54Z")

</div>

If you go the fork route, clustering is only a few lines with Google’s `@googlemaps/markerclusterer` package:

1. Add the package to the forked component (or load the UMD script, which exposes a `markerClusterer` global).
2. Create your markers as usual but don’t attach them to the map.
3. Call `new markerClusterer.MarkerClusterer({ map, markers })`.

When the marker data changes, call `clusterer.clearMarkers()` and `clusterer.addMarkers(newMarkers)` instead of recreating the map. If you switch to `AdvancedMarkerElement`, the map needs a Map ID, and the clusterer works with those markers too.