In usability we trust

UX and all things web

Handling Large Amounts of Markers in Google Maps

Google MapsTo use markers in Google Maps is fairly trivial, at least when you have a reasonable amount of them. But once you have more than a few hundred of them, performance quickly starts to degrade. In this article I will show you a few approaches to speed up performance. I’ve also put together a test page to compare them.

Update [2009-05-06]:This article has been updated with the addition of the utility library MarkerClusterer. The test results in the end of the article and the test page has also been revised.

If you’re new to markers in Google Maps I recommend that you first read Basic operations with markers in Google Maps for an introduction on how to use them.

The Marker Manager – Keeps track of them

Your first option might be to use the MarkerManager since it’s an utility library provided by Google. Rather than adding each marker individually to the map using GMap2.addOverlay() you first add them to the MarkerManager. The MarkerManager keeps track of all your markers. By defining at which zoom-levels each marker should appear you can cluster the markers to reduce the amount being shown at a time.

The MarkerManager is initially a bit slower than just adding markers directly to the map but the added benefit is that you can have more control over them.

You add markers to the MarkerManager with addMarker(GMarker, minZoom, maxZoom?). This method takes three arguments, the first one being the marker you want to add. The two second arguments are optional but define at which zoom-levels the marker will be visible.

A simple example

// Create a new map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(59.5, 14.0), 6);
// Create a new instance of the MarkerManager
var mgr = new MarkerManager(map);
// Create a new marker
var marker = new GMarker(new GLatLng(59.0, 13.80));
// Add marker to the MarkerManager
mgr.addMarker(marker);

Obviously there’s not much use adding a single marker to the MarkerManager, but if you have hundreds of them, this might be the way to go.

Bulk adding the markers

An even more efficient way of using the MarkerManager is to do a bulk add by first putting all your markers into an array and then add the array to the MarkerManager with the addMarkers(markerArray, minZoom, maxZoom?) method.

// Create a new instance of the MarkerManager
var mgr = new MarkerManager(map);
// Create marker array
var markers = [];
// Loop to create markers and adding them to the MarkerManager
for(var i = 0; i < 50; i += 0.1) {
    var marker = new GMarker(new GLatLng(59.0 + i, 13.80 + i));
    markers.push(marker);
}
// Add the array to the MarkerManager
mgr.addMarkers(markers);
// Refresh the MarkerManager to make the markers appear on the map
mgr.refresh();

Notice that you have to use mgr.refresh() after adding the marker array to it. That's not necessary when adding the markers one by one.

Additional methods

  • removeMarker(marker)
    Removes a marker from the MarkerManager
  • clearMarkers()
    Removes all markers.
  • getMarkerCount(zoom)
    Returns the number of markers at a given zoom-level.

The MarkerManager is a utility library provided by Google. On the URL below you'll find the source code as well as the full documentation and examples.

Google Maps MarkerManager SVN

Marker Light - Markers on a diet

Pamela Fox at Google has made a sample app for what she calls MarkerLight, which render less complex markers, thus increasing performance. The trade-off is that it's really just an image on the map, you can't interact with it. If you don't have the need for interaction this is a really easy way to gain performance, the only difference from the ordinary way of doing it is that you create a MarkerLight instead of a GMarker.

On Pamelas post about MarkerLight she explains why this approach is faster:

The reason GMarker takes so long is that it's actually composed of many DOM elements - foreground, shadow, printable version, clickable area, etc.

If your purpose is visualization, then you can get away with just creating a GOverlay extension like MarkerLight that creates a div with a background URL (or background color, even better!).

- Pamela Fox

Here's how to use it:

map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"}));

red_dot.png in is the image used for the marker. It's a very small and simple one.

You can try performance with different numbers of markers on Pamelas test page.

Download markerlight.js

Using Marker Light in combination with MarkerManager

You can add the benefits of MarkerLight with the clustering capabilities of the MarkerManager. It's really easy, just combine the two:

mgr.addMarker(new MarkerLight(latlng, {image: "red_dot.png"}));

The reason you should do this is that you can display a different number of markers at different zoom levels. This way you can ensure that not too many markers are displayed at the same time.

Clusterer - Only show what you need

A different approach is to use ACME labs Clusterer. It's a third party library that offers a faster way of adding markers. It's released under the BSD license and is freely available.

It allows faster performance by doing two things.

  • Only the markers currently visible actually get created.
  • If too many markers would be visible, then they are grouped together into cluster markers.

This lets you have literally thousands of markers on a map while maintaining decent performance. My tests with this approach shows that it's significantly faster than the MarkerManager approach.

Here's how to use it:

// Create a Clusterer object
var clusterer = new Clusterer(map);
// Create marker
var marker = new GMarker(new GLatLng(57.8, 14.0));
// Add marker to the map
clusterer.AddMarker(marker, 'text to infobox');

To remove a marker from the map call clusterer.RemoveMarker(marker).

There's also a few methods to change the behavior of the marker.

  • clusterer.SetIcon(GIcon)
    Changes the cluster icon
  • clusterer.SetMaxVisibleMarkers(n)
    Sets the threshold marker count where clustering kicks in. Default value is 150.
  • clusterer.SetMinMarkersPerCluster(n)
    Sets the minumum number of markers for a cluster. Default value is 5.
  • clusterer.SetMaxLinesPerInfoBox(n)
    Sets the maximum number of lines in an info box. Default value is 10.

Download Clusterer2.js

ClusterMarker - Chunk 'em all up

ClusterMarker is a free Javascript library released under the GNU General Public License, that adds clustering capabilities to markers. The unique thing with this library is that it automatically detects markers that intersect each other and cluster these into a single cluster marker.

The images below illustrates how this works

Images by Martin Pearman

The constructor takes two arguments and looks like this:

var cluster = new ClusterMarker(map, options)

map is a reference to the map object and options is an object literal that can have these properties:

  • clusterMarkerIcon [GIcon]

    Changes the default cluster marker icon to an icon of your choice.

  • markers [array]
    An array with all the markers you want to pass to the ClusterMarker

Apart from these properties you can also use all the other properties of the class. Se the documentation for a complete list.

Here's how to add markers using the ClusterMarker with a minimum amount of code.

var markerArray = [];
// Insert code to fill the markerArray with markers...
// Creating a new cluster by adding the map and the markerarray
var cluster = new ClusterMarker(map, {markers: markerArray});
// Refreshing to show the added markers
cluster.refresh();

This code will insert the markers on the map and cluster them under one icon if they're close enough to each other. For more fine grained control of how it operates there are several methods and properties. For a detailed explanation of how the library works there's excellent documentation on the Clustermarker Project page.

MarkerClusterer - The new kid in town

This utility library is the newest of them all and wasn't around when I originally wrote this article. This library, which is written by Xiaoxi Wu and is part of the Google Maps Open Source Utility Library is easy to use and shows excellent performance.

Like some of the other libraries it reduces the number of visible markers by clustering them together making it easier to get an overview. Watch the image below to see how.

Image by Xiaoxi Wu

It's constructor takes three arguments, the first one being a reference to the map, the second one being an array of GMarkers and the third one being an object literal with options. Only the first one is required.

var markerCluster = new MarkerClusterer(map, markers, opts);

So to add a bunch of markers to the map having the default settings of the MarkerClusterer you do this:

var markers = [];
// Insert code to fill the markerArray with markers...
// Creating a new cluster by adding the map and the array of markers
var markerCluster = new MarkerClusterer(map, markers);

See the documentation for a full explanation of the library and it's capabilities. Also read MarkerClusterer: A Solution to the Too Many Markers Problem on the Google Geo Developer blog for more information.

Download markerclusterer.js

Compare performance

Compare the different techniques on the Test page

Inspired by Pamela Fox testpage for MarkerLight I've set up a test page of my own where you can test the performance of all the different approaches in this article.

The result

I ran a series of test with a few different browsers. In each test I added 500 markers using the different techniques. Between each test I refreshed the browsers. All tests were performed on a PC with a 3.60 GHz Pentium 4 HT processor and 2 Gb RAM running Windows XP.

Load times in milliseconds (ms)
Google Chrome 1.0.154 Safari 3.2.1 Firefox 3.0.10 Internet Explorer 8.0 Opera 9.63 Average result
GMarker 1649 1168 3020 3329 1250 2083
MarkerManager 1828 1333 3232 5485 1297 2635
MarkerLight 393 269 797 860 297 523
MarkerManager + MarkerLight 400 534 1134 906 469 689
Clusterer2 29 40 66 109 47 58
ClusterMarker 432 502 832 1219 500 697
MarkerClusterer 189 527 374 1047 329 493

Note: Since the addition of MarkerClusterer I've ran the tests again and updated the result grid. Some of the web browsers are newer than in the lats test run. See the old test results.

In this test Clusterer2 was the fastest technique of them all. Be aware however that this is not the entire truth since I've only been able to measure how long it takes before the markers are passed to the map, not the actual time until they are visible on the map. When taking this into consideration I find that MarkerClusterer is the fastest technique closely followed by ClusterMarker.

When it comes to browsers the fastest performance is marked with green and the worst performance is marked with red in the result grid. Not surprisingly Internet Explorer is the slowest of the lot. Google Chrome and Safari has the fastest overall performance with their blazing fast Javascript engine.

If you have an idea on how to improve this test to better measure the actual time until the markers are visible on the map, please share in the comments or contact me through the Contact page.

Conclusion

The techniques showed in this article are all fairly easy to implement and works well when you don't have an incredibly large amount of markers. For those occasions where none of these techniques suffice you will have to resort to more extreme measures, like creating a big overlay with all the markers, but that's beyond the scope of this article.

I hope that you'll find these techniques helpful. Happy coding!

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

103 Comments

  1. Excellent article. Thank you!

  2. great article!, Do you know if there is something similar for Polyline?

    in regards to your time measures, you could have a diferent image for each marker, passing an id like so:
    img src=”myimage.php?id=xxx” and measure the time in the server, or just with the php file and in the php register the time, so you get a start and end time of the images served.
    Hope that helps.

  3. Ingo Claro: Well I’ve written two articles about performance on polylines in Google Maps. In the end of the second article there are links to test pages, testing different approaches and measuring performance. Check out Polylines in Google Maps [Part 1] and Polylines in Google Maps [Part 2].

    Regarding you idea of measuring the time with the help of PHP I guess that it could work. One possible disadvantage being that it might slow down performance a bit since the browser won’t be able to cache the images. I would prefer if there were some way of doing it in pure Javascript. But still that’s the best idea so far. Thanks!

  4. thanks! I’ll look at your articles.

    In regards to the testing, I would be slower than a real world scenario, but it will measure all the technics the same, so it’s a fair comparision.
    In that regard, I noticed that you make random point’s. It would be better to load pre calculated point’s and use the same data in all cases.

  5. Awesome man!

    Just as I’ve had to quit this war by lacking out of time.. you just did it great!

  6. Great article! Thanks for gathering all this information. It’s going to save me a lot of time spent on research.

    Regarding the testing of displaying of pins on the map, there’s no need to point to a dynamically served image. You just need to link to a static image with appropriate Cache-Control headers set, so browsers don’t download the image each time, and log requests with a large time resolution (1 millisecond should be enough). Provided these, you’ll be able to easily and accurately measure the time overhead after passing the markers to the map.

  7. Another fantastic article. I’ll add this to the documentation shortly.

  8. You might also want to try this new library, similar to ClusterMarker:
    http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markerclusterer/

  9. Pamela: Sounds great! Yes I’ve discovered that library after I wrote this article and it looks very promising. I will have to include it in the test suite as soon as I find the time.

  10. Nice article Gabriel! As you say, when you need to show thousands of markers, javascript libraries are not a valid approach. On our projects, we always do the markers clustering at server side, using python (or similar) and some precalculated info, and returning only the cluster info.

  11. Marc Puig: What kind of algorithm you used to do server side clustering? Is the clustering done when loading to server or do it on the fly for every query? If you have severl 50,000 markers, clustering still takes a while. Thanks.

  12. +1 for testing MarkerClusterer under the same conditions as the others please. MarkerClusterer is fairly quick in IE and looks user friendly (nice icon that includes the number of markers)

    Gabriel, this has been a very useful article and well presented. Thank you.

  13. Gary: MarkerClusterer looks very interesting and I will include it in my speed test as soon as I find the time. Meanwhile check out Xiaoxi Wu’s own Speed Test Page.

  14. I would love to see a flex/flash class for this…

  15. sorry flash code for MarkerClusterer

  16. Thank you so much, amazing article, it summarized everything i need to know about clusters.

    Thank you again
    Keep up the good work

  17. Just been trying to use your “MarkerManager + MarkerLight” code but after trying to add the marker lights to the marker manager i noticed that in your code you have commented out the part where it does this, and simply adds them in the same way as if you were just using marker lights (as simple overlays). Is there any reason for this? Is there still a way of added them to a marker manager or does this method no longer work ?

  18. Josh: You’re absolutely right, there’s an error in the test case with Markerlight + MarkerManager. I must have changed it for some reason I can’t remember and then forgot to change it back. There’s no problem getting it to work so you can safely use that combination if you like.

    Now it’s corrected in the example, and I have updated the results in the result grid accordingly.

    Thanks for noticing!

  19. Do you know how to do it with Google Web Toolkit? I have a GWT Google Map googleMap = new MapWidget(); … I need to do clustering.

  20. Ive been really struggling to get below into a for loop, if anyone could shed some light
    that would be awesome

    map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"}));

  21. I have written a tutorial which describes some basis clustering techniques. It is written for static maps but can easily be adapted for server side clustering with Google Maps API.

  22. There is any way to use MarkerClusterer with Flex?

  23. Hi,

    Great tutorial, found an error. Line 08 of the code example found in the section “Bulk adding the markers”:

    marker.push(marker);

    This should actually read:

    markers.push(marker);

    Jason

  24. Jason: Good catch! Thanks for noticing! I’ve corrected the example now.

  25. To time actual marker display, couldn’t the image src instead of being a http url to a php script, just be a javascript: url so that you can effect a method call on the display of the marker?

  26. Sean Toru

    Can you plz help me with replacing fl package to mx package.

    Thanks

  27. Thank you SOOO much for the resources! I tried programming a class that would query my database for only the markers that where within the google maps box, and it was a MESS and had a million glitches! If I had known earlier that these sources were available, I would had never bothered querying my database like I did. Again, thanks a million.

  28. Please delete my last post.

    This is a sample of server side cluster based on admin border. Just for some one interest in that topic.

    http://www.usda.gov/recovery/map/

  29. nice example of server side clustering: http://www.geocubes.com

  30. thank you! it’s realy help!

  31. Great article!
    Do you know if there is marker cluster for the new v3 api?

  32. Thank you so much..
    great article, saved my day :)

    I am about to finish my stuff now..! thanks again!

  33. thanks thanks and thanks!

    Great article!

  34. Great write up. Was wondering is any of this marker manager being ported over to Google Map V3?

  35. Clayton Narcis: There’s no official version of MarkerManager for V3 but I know that some people have ported it but I don’t know if they are publicly available.

  36. Hello,

    i tried some speed tests with markerClusterer and ClusterMarker and I noticed that with a lot of markers ( > 1000) markerCluster seems to takes the advantage ( but sometimes not -_-‘ ).

    But once the markers are clusterized, i think i prefer the markerClusterer: when you drag the map, the markers don’t desappear quickly while clusters are redraw.

    Furthermore, if you click on a cluster, the comportement is different : markerCluster will try to show a marker at the maximum zoom that is possible ( which sometimes is cool and sometimes not), while markerClusterer will bring you step by step ( zoom level by zoom level) to the marker. as for me, i prefer this way.

    conclusion : i think they are two good clusters. People have to try them both. ( although MarkerClusterer has little issues at this date : http://code.google.com/p/gmaps-utility-library-dev/issues/list )

    ps: both can works pretty well with MarkerLight. If you want to combine MarkerLight and MarkerClusterer, you have to add 3 methods to the markerLight class : hide(), show() and isHidden() ( see Mike Williams’s elabels to find these methods).

    If you want to use clusterMarker with markerLight, you have to do a very little hack in cluster marker concerning the set of GIcon ( that you don’t need no more). You can even hack the clusterMarker to create a GOverlay ( as markerCkusterer rather than a GMarker).

    ricco

  37. ricco: I agree with you that they are both good clusterers, definitely two that should be considered when choosing the right clusterer for the job. Also thanks for the tip about using markerLight with the clusterers. Could come in handy!

  38. ?????????! ??? ????? ??????? ? ????????, ? ? ?? ?? ????? ??? ??????????? ? ?????????????, ? ?? ????????? ?????. ?????? ?????? ????? ??????? ??????? ?????????? ? ???????? ?????. ??????? ??????!

  39. I’m working on your example clustermaker. Line 6 cluster.refresh() dosen’t work. refresh is not in the cluter2.js. Please advice. Thank you

  40. You might also be interested in my clusterer for Flash based on a serverside PHP solution I found. More info and a demo here:

    http://www.kelvinluck.com/2009/08/google-maps-for-flash-marker-clustering/

  41. For those of you who are looking for a clustering solution for the v3 API: There’s a new one i wrote at work, called Fluster and available for download at http://blog.fusonic.net. There will be an improved version the next days which speeds up the whole process of clustering significantly.

  42. Matthias Burtscher Good job Matthias! I know a lot of people, myself included, have waited for this!

  43. Hi
    If someone is interested in an example of the MarkerClusterer in action, I’m using it to display my photos.

  44. Wow, this is a great resource. Thank you very much for taking the time to compare all of these different techniques and for creating the demo page to sample them all!

  45. Really useful. Thanks!

  46. Hey Gabriel Svennerberg,
    Thanks a lot for your help through the book, its really nice of you to share your knowledege. Awaiting for the complete version of book with clusters.
    Thanks again.

  47. Here is a marker manager for GMap v3, in case anyone is looking for it.

    http://blog.fusonic.net/archives/tag/google-maps

    have yet to test it but will definitely look into it

  48. Will ClusterMarker & MarkerClusterer work with v3? If not whats the missing piece to cause issue? Thanks

  49. Great article! Thanks.

  50. Hi,

    I would like to use any this those scripts, but i have a problem – i need to agregate markers not only by the density of them but also by the type of the marker – can any one point me in some direction how to do it w/o inicializing 3 markerclusters on one map ?

  51. hey, great article!!
    but i have some problem when using the markerclusterer.js, the error is

    Microsoft JScript runtime error: ‘GOverlay’ is undefined
    the error code is ClusterMarker_.prototype = new GOverlay();

    The error is appear in markerclusterer.js.
    Does anybody knows what’s wrong with it?

    urgent..please help me.

    thanks..

  52. @Khahishen It sounds like a case Of that the Google Maps API haven’t loaded properly.

  53. thanks..
    but any solution for that?

  54. For fun, I tried mapping nearly 8000 libraries using MarkerClusterer:
    http://libweb.in-vicinity.com/

    On my machine Google Chrome manages to digest the data in 1-2 seconds. All other browsers take 10 times longer or longer.

    Next step is to figure out how to do this faster. Only option seems to be to use server side, or?

  55. Fantastic article. Saved me a day or two to experiment with all those!

  56. Many thanks for a comprehensive and lucid article and the links to the resources – just what I needed!

    Phil

  57. learned so much from the article and from you comments. thanks. web development

  58. Chatroulettemap

    July 24, 2010 at 6:09 am

    We’re having trouble getting MarkerLight to work with MarkerClusterer even after implementing the show/hide/ishidden functions. Can anyone provide verified working code?

  59. Hi, first of all thanks for the post, I get to work the MarkerClusterer, very useful!

    Now, I have a DB in mysql with locations, thousands of them. I need to filter them with a search and then mark those locations in the map using MarkerClusterer.

    The thing is, I have the .js file, the .css file, and the index.html file…how and where can I connect to the MySQL DB and make the query I need.

    Any thoughts?

    Cheers

  60. Hi,
    i have created markerCluster successfully in v3. But my requirement is to give some specific color to that cluster(not a random color) while zooming in or out. Actually we have three types of markers array green, red and yellow colored. So what i need is to make cluster of green markers and the color of cluster created should be green only. same for all. Any idea how we can do this…..its urgent
    thanks in advance

  61. @pankaj Have you tried to style it the same way styling is done in MarkerClusterer for v2 via the styles property of the MarkerClustererOption object? MarkerClusterer for v2 documentation

    MarkerClusterer for v3 seems to not have a full documentation but I think it has the same features.

  62. How do I show the markers at the maximum zoom level? Since the locations is repeated twice, my marker at the maximum zoom level is disabled. Could someone pls help me with this? Thanks a ton.

  63. It would be interesting to benchmark them on an Android phone.
    That is where I am at today, trying to pan and add on the fly…

  64. GGeoXML seems to handle thousands of markers quite efficiently vs. adding thousands of markers individually using addOverlay. Why is this?

    It’s interesting that GGeoXML only triggers a single ‘addoverlay’ event. It seems that GGeoXML only triggers a single draw for all the markers at once. This batch effect must be the source of it’s efficiency.

    Dan Fabulich’s MultiMarker seems to emulate the single batch drawing of markers, but with a custom “light” marker instead of a GMarker. It is very speedy.

    I would be interested to see a MultiMarker that could handle GMarkers. I think it would be quite fast. Problem is it would require reproducing the GMarker’s ‘redraw’ method.

    Any thoughts?

  65. Awesome Post!!
    Are you aware of some library that would accomplish the same task in GWT?
    Thanks

  66. Anyknow who to implement this?

    http://libweb.in-vicinity.com/

    I wanna do the same but, with my points

  67. Just curious, once you break out of the cluster icons, if the individual marker icons can be modified to represent the icons of different categories. Obviously sometimes markers can be assigned a type, and I want the icon for these markers to represent that type.

    Many thanks!

    *Also, it would be interesting if the cluster icons themselves could be changed to represent a hybrid collection of markers, or a monoculture.

    Justin

  68. Great stuff, but please help how to add
    addListener(marker, "click", function() {marker.openInfoWindowHtml(html);})
    in
    for (var i = 0; i < 100; ++i) {
    var latlng = new GLatLng(data.photos[i].latitude, data.photos[i].longitude);
    var marker = new GMarker(latlng, {icon: icon});
    ?????addListener(marker, "click", function() {marker.openInfoWindowHtml(html);})
    });
    to each marker.

  69. It helps when you create a function createMarker(), then you can use the infoWindow.

    var markers; // global variable with all markers

    function addMarker(lat,lng,title,domain,path,published,name) {

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    map: map,
    icon: image,
    title: title
    });

    google.maps.event.addListener(marker, “click”, function() {
    infowindow.setContent(“foo”);
    infowindow.open(map,marker);
    });
    markers.push(marker);
    }

  70. I am developing a blog and I am seeking a new template.Yours appears relatively decent! Be my guest to visit my blog and suggest things!

  71. If you are building apps with RubyOnRails then
    You should also check out the Cartographer plugin which handles large set of markers with least effort for Marker Management & Clustering http://github.com/parolkar/cartographer

    It works with Rails 3 and Google maps v3

  72. This article helped me a lot! These are just the solutions I have been looking for. I ended up using Markercluster and am extremely happy with the results. My maps have anywhere from a few hundred pins up to over 8,000. You can see the results for each state with the links here:

    http://www.westernmininghistory.com/minesmap/

    In addition, I made a version live with all the western mines – almost 30,000 points. Its slow loading as the data file is almost 3 megabytes – but i’m astounded it works at all.

    http://www.westernmininghistory.com/westernmines/

  73. Good tutorial that I found quite useful. Thank you for sharing.

  74. markerclusterer doesn’t work with google maps api v3
    filled with old v2 code.

  75. Great information! I have just over 250 markers and it was really starting to get overwhelming managing them all and was thinking my only option was an overlay. Thank you for this. :)

  76. One question I have, is how many markers can you use just using the standard method? Somewhere I read 200. Somewhere else I read 2,000. I just want to know so that I can modify my website accordingly.

  77. Jethro Williams: Unfortunately there’s no definite answer since it depends on which browser and which computer the user have. 2000 markers might work fine in Google Chrome on a high end computer while 200 might be sluggish in Internet Explorer 6 on a crappy computer.

  78. Can someone shed some light on how Fusion Tables’ map visualization is able to show such a large number of markers, each with info windows. It does not have that clustered single marker with a number on it style, so I don’t know what clustering it is doing if any. It is very fast though!

    Here is an example
    http://www.google.com/fusiontables/DataSource?snapid=S183998uo39

  79. Rob Newton: The reason for this is that instead of rendering individual markers on the map, images with several markers are rendered on a server and are then layed over the map. Think of transparent map tiles. These work much as an imagemap do, that’s why the markers can still be clickable.

    So the reason that it’s fast is that instead of rendering 1000 markers, it renders maybe 9 image tiles with images of markers on them.

  80. Thanks for the answer Gabriel. I have done more research and found that I could accomplish the same server side rendering of markers as a tile overlay by using a KMLLayer. (http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers)

    Do you know of any server side code that can reproduce the same functionality of server side marker drawing as transparent tiles without relying on the Google servers to do the work? (Google has size limitations)

  81. For v3 of the maps API there is now a cluster manager available:
    http://sourceforge.net/projects/fluster/

  82. Great article. Only wish that you had included the times for no-clustering as well. This would allow us to see how the selected clustering libraries compared to no-clustering on each browser.

  83. please help me i’m trying to utilize marker manager but it doesn’t work could you please explain me in details about marker manager i have included the markermanager.js and when i try to get the count its not working it return zero when markers present in my map viewport
    mgr = new MarkerManager(map);
    after plotting the marker i called
    var markercount=mgr.getMarkerCount();

  84. Thanks a lot man! This thing really help me out doing Clustering Image Marker. BTW, I’m using ClusterMarker. Good Job!

  85. Thanks a lot! This is what I’ve searched. I play with markers, but I have problem with maps v3 api…

  86. thank you so much

  87. Thanks for the thorough article on these marker features!

    I’m passing the array of markers and letting marker manager do it’s
    thing to display the certain number of markers per zoom level that I designate. However, you’ll note that the initial load shows 100 markers but I tell it to show 60
    at zoom level 6, which is the initial zoom level. If you zoom in and
    zoom back out, zoom level 6 only shows the appropriate 60. If you
    load the page and just zoom out and then in, it still shows 100.
    Something must not be working totally right but not sure what.

    Lastly, my infowindow is only showing the same infowindow information when I click
    on any marker. Shouldn’t the infowindow be unique for each marker
    since I’m designating it within the createrMarker function?

    Thanks for any help with those two points.

  88. I am trying to use ClusterMarker with Google map API v3.
    It gives me error ‘GIcon is not defined.’ Does anyone had this error before.
    Really appreciate your help. Thanks.

  89. @TestUser: You get that error because ClusterMarker is built for Google Maps API v2 and therefor does not work with v3. Try using MarkerClusterer for v3 instead.

  90. Thanks a lot man! This thing really help me out doing Clustering Image Marker.

  91. Great contribution. I miss MarkerClustererPlus.

  92. I know this is an old article, but i am commenting anyway :-) I work as a Senior Backend Developer in Denmark, and one of our customers is Trygfonden (Tryg Foundation). They have a website called http://www.hjertestarter.dk. On this site there is a google map containing all defibrillators in Denmark.

    We are talking over 5.000 Markers.

    When the site was launched some years ago it was done with a standard Google Maps implementation, with Googles Clustering. This was okay as long as the amount of markers was less than 1.500. But Google clustering is client side clustering, so 5.000 markers was way to much for IE and FF to handle, client side….

    We created a Server Side clustering algorithm in C# with a JSON Webservice Interface. We devided the visible part of the map into Grid cells (server side) and clustered all markers within each cells with our algorithm.

    We are now able to cluster up to 25.000 markers within 1 second and return a clustered set of markers to the browser as a json response.

    In my oppinion, this is the only way to solve the clustering problem when you work with many markers :-)

    Just wanted to share my thoughts on this subject….

    Kind Regards.
    Lasse Rasch
    Denmark.

  93. Hi,
    is there a way to use clustering on a regional base? Let’s say I have polygons of counties or states and I’d like to check which marker is located in which polygon and cluster them this way. Is this possible? I haven’t found anything helpful so far.

  94. Fantastic information

  95. Perfect. Searched for a good way integrating much markers into one script. maybe you can check out in the future on http://www.fapl.de

  96. thank you. great articel. Check out on http://www.nw-familyplanet.de

  97. Thanks for the article. It was really helpful.

  98. Victor Björklund

    June 2, 2013 at 5:19 pm

    Tack! Det här sparade mig en massa jobb! =)

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>