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

[danlisboa (Daniel)]

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!

[Joyce]

Hey @danlisboa

I’d recommend forking the element and asking AI to work on it:

[iconic (adesina samuel)]

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

[wu_emma (Emma Wu)]

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.