Google Maps V3 rendering over 1 million markers (in a reasonable time)

javascript performance google-maps google-maps-api-3 markerclusterer
Jiminy picture Jiminy · Mar 17, 2014 · Viewed 12.1k times · Source

I have recently created a Google Map using V3 of the API (latest version). One of my requirements is that I am able to render over 1 million markers (in a reasonable time). A reasonable time would be under 15 seconds.

I know that it is fairly crazy to render all 1 million markers at once which is why I have investigated performance options. One of the options I came across and utilized is the MarkerClusterer: https://developers.google.com/maps/articles/toomanymarkers

However, I am now starting to see performance issues when testing the MarkerClusterer with over 100,000 markers as it is taking a long time to render the map and markers (1 min+). Eventually, I have managed to make the page crash with around 200,000 markers.

Is there any way to improve the performance of the map when using this many markers?

Thanks in advance for any help.

Answer

Cyril Cherian picture Cyril Cherian · May 21, 2015

I had similar challenge of showing a million+ points on map.

Made use of elastic search clustering on server side and leaflet cluster on the client side.

May be this be helpful..

Demo here

Check the code here

Related questions

Defer attribute doesn't work with Google Maps API?

I'm trying to make sure the Google map is the last thing that loads on the page and doesn't affect the performance of the page negatively. When the defer attribute is placed after ...sensor=false", the map does not appear. …

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
What is the difference between call and apply?

What is the difference between using call and apply to invoke a function? var func = function() { alert('hello!'); }; func.apply(); vs func.call(); Are there performance differences between the two aforementioned methods? When is it best to use call …

Read More