How to create and customize cluster markers in React

[@GoogleMapsPlatform]

Subscribe for more Google Maps Platform tutorials! → goo.gle/GoogleMapsPlatform

[@adamwoolf9993]

Leigh. The quality and clarity of your explanations, teaching style and of the video production is second to none IMO. Thanks so much for this and please keep up the great work!

[@LifeWithSeb99]

Could you make an example with dynamic points? Let's say we're loading new points from the server every time we drag the map - some of the points are new, and some of them are no longer there. I tried to that and it's not been successful...

[@MaxI-fw1vv]

Very nice exercise! Are you able to zoom with "zoom" property, not "defaultZoom"?

[@parladdgna]

i m not able to zoom :(

[@faridmammadov4277]

Thank you very much man !

[@tantoniou]

But how about custom icons for clustering? like svg's I mean

[@amitd1927]

developers.google.com/maps/documentation/javascript/examples/advanced-markers-graphics Check out, this is possible

[@ninaandreeapopovici3264]

Every time I add a Center to my Map, it keeps me stuck I can't move the Map around. How can I bypass this issue?

[@amitd1927]

Anyone facing issues with the zoom, Do change "Center" to defaultCenter and "Zoom" to defaultZoom. For example: defaultZoom={8} defaultCenter={{ lat: 18.9499412, lng: 72.9486126 }}

[@InfiNity-jw9hc]

same issue, have you found any solution?

[@AngelaYuGoogle]

See this example of setting an initial state of the map including center, but then updating the state of the map whenever the user changes the map state visgl.github.io/react-google-maps/examples/multiple-maps

[@coding-soju]

This is late but, you need to use defaultCenter.

[@parladdgna]

@@coding-soju also defaultZoom

[@developerism_]

Is it possible to create a React JS app, which provides navigation as google maps+ pop ups the images and snaps of nearby picnic spots? If yes, which APIs will be needed? Can you please make a tutorial for it?

[@yeetergonzales832]

Hello, is there a way to set zoom/pan to the lowest level of cluster markers? I don't get animations to center positions of a cluster, it sort of just jumps there, and the panTo and setZoom dont really help for some reason

[@oleksandr1006]

Hi, I wrote everything according to the instructions. I receive markers from requests to the API of the delivery service. If I show up to 1000 markers, then everything works fine. But I need to display 30,000 delivery points across the country. If I do this, the page freezes and nothing is shown on the map. But in many online stores, everything works. I also wrote an option to connect the map in pure JavaScript without clustering. All 30,000 markers are drawn. I don't have much experience to write my own clusterizer. But the option using libraries does not work. Please advise. Or write a guide on how to draw at least 10,000 markers.

[@11King99]

It doesn't work when you trying to add new marker to the map.

[@nazariisaviak6298]

The same issue...

[@tsemibhutia4810]

​@@nazariisaviak6298 you need to rerun the clustering method

[@amitd1927]

Anyone facing issues with the zoom, Do change "Center" to defaultCenter and "Zoom" to defaultZoom. For example: defaultZoom={8} defaultCenter={{ lat: 18.9499412, lng: 72.9486126 }}

[@JonnyOrtiz-wu8ii]

How do you add an InfoWindow for each? I'm having trouble trying to figure out how to implement the ref since the ref in the demo is a callback.

[@adamwoolf9993]

If you put the marker in its own component you can handle the state per marker.

[@mohammadeslim9929]

when i use the same workflow for like 50k markers the app crashes, any solutions ?

[@oleksandr1006]

To paint a pair of markers is absolutely not a practical task. Here is the task I decided: to draw 30 thousand delivery service markers across the country, which I receive in response to a request to their API. I figured out how to draw only those markers and clusters that fall into the map display grid. The map began to fly, because when trying to draw all 30 thousand, the page froze. It will probably be necessary to record a guide for KZbin, because there is no video for such a practical task on all of KZbin.

[@amitd1927]

if you're facing, then refer the github code of examples, that way I was able to resolve the issue of "Maximum update depth exceeded"

[@jismonEnsol]

How can I change the color of clusters?

[@daltonrandall4348]

Is typescript mandatory to use map clusters now, or can you still use normal javascript in the HTML page?

[@chriscwc]

No, typescript is optional.

[@daltonrandall4348]

@@chriscwc Thanks so much. I find it so difficult to figure out how to embed these things without massive amounts of hassle.

[@youtubechoices]

is this using the new cluster that google will be using from now on?

[@obakengdiphoko7655]

how do you enable zoom in and out?

[@amersyu1458]

instead of passing zoom into your map component, pass in defaultZoom. So upon rendering the map will have the defaultZoom value but enable user to zoom in and out.

[@kpoplightsticks1443]

How can I change the numbers on clusters to Arabic numbers? Thanks

[@sumithme4305]

Did you manage to find this

[@kpoplightsticks1443]

@@sumithme4305 Yes, I am using @react-google-maps/api and I changed it by customizing the calculator of MarkerCluster

[@AngelaYuGoogle]

Here's the reference documentation for the js-markerclusterer library that is powering this marker clustering, where the default renderer uses a String(count) of the markers for the Label of the marker. You can change the Label of the cluster's marker to be a different String. googlemaps.github.io/js-markerclusterer/classes/DefaultRenderer.html

[@جعفر-س7ت]

❤❤