To 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.
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.
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.
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
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.
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.
| 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
January 13, 2009 at 11:52 pm
Excellent article. Thank you!
January 15, 2009 at 6:23 pm
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.
January 16, 2009 at 10:47 pm
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!
January 18, 2009 at 7:19 pm
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.
January 30, 2009 at 6:11 pm
Awesome man!
Just as I’ve had to quit this war by lacking out of time.. you just did it great!
March 23, 2009 at 11:26 pm
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.
April 4, 2009 at 8:34 am
Another fantastic article. I’ll add this to the documentation shortly.
April 4, 2009 at 8:37 am
You might also want to try this new library, similar to ClusterMarker:
http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markerclusterer/
April 9, 2009 at 7:14 am
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.
April 19, 2009 at 9:37 am
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.
April 23, 2009 at 5:00 pm
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.
April 27, 2009 at 11:59 am
+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.
April 27, 2009 at 3:02 pm
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.
May 8, 2009 at 11:07 pm
I would love to see a flex/flash class for this…
May 8, 2009 at 11:09 pm
sorry flash code for MarkerClusterer
May 19, 2009 at 7:21 am
Thank you so much, amazing article, it summarized everything i need to know about clusters.
Thank you again
Keep up the good work
May 22, 2009 at 10:20 am
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 ?
May 22, 2009 at 12:51 pm
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!
May 25, 2009 at 3:23 pm
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.
May 26, 2009 at 6:49 am
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"}));May 29, 2009 at 9:02 pm
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.
June 8, 2009 at 4:45 am
There is any way to use MarkerClusterer with Flex?
June 10, 2009 at 3:10 pm
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
June 10, 2009 at 5:00 pm
Jason: Good catch! Thanks for noticing! I’ve corrected the example now.
June 30, 2009 at 4:15 am
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?
July 2, 2009 at 1:48 pm
Ported to flash…
http://www.toruinteractive.com/stuff/MarkerClusterer_For_Flash.zip
July 7, 2009 at 3:24 am
Sean Toru
Can you plz help me with replacing fl package to mx package.
Thanks
July 30, 2009 at 10:47 am
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.
August 3, 2009 at 8:00 pm
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/
August 4, 2009 at 5:06 pm
nice example of server side clustering: http://www.geocubes.com
August 7, 2009 at 6:16 pm
thank you! it’s realy help!
August 24, 2009 at 10:02 pm
Great article!
Do you know if there is marker cluster for the new v3 api?
August 25, 2009 at 10:58 pm
Thank you so much..
great article, saved my day 🙂
I am about to finish my stuff now..! thanks again!
September 15, 2009 at 11:03 am
thanks thanks and thanks!
Great article!
October 4, 2009 at 6:45 pm
Great write up. Was wondering is any of this marker manager being ported over to Google Map V3?
October 6, 2009 at 8:49 pm
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.
October 13, 2009 at 5:59 pm
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
October 13, 2009 at 9:50 pm
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!
October 18, 2009 at 12:04 pm
?????????! ??? ????? ??????? ? ????????, ? ? ?? ?? ????? ??? ??????????? ? ?????????????, ? ?? ????????? ?????. ?????? ?????? ????? ??????? ??????? ?????????? ? ???????? ?????. ??????? ??????!
October 23, 2009 at 12:00 pm
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
October 30, 2009 at 3:17 pm
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/
December 16, 2009 at 5:24 pm
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.
December 16, 2009 at 6:21 pm
Matthias Burtscher Good job Matthias! I know a lot of people, myself included, have waited for this!
January 7, 2010 at 7:20 pm
Hi
If someone is interested in an example of the MarkerClusterer in action, I’m using it to display my photos.
January 11, 2010 at 9:43 pm
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!
January 13, 2010 at 7:25 am
Really useful. Thanks!
January 19, 2010 at 10:46 am
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.
January 25, 2010 at 9:21 am
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
February 2, 2010 at 9:22 am
Will ClusterMarker & MarkerClusterer work with v3? If not whats the missing piece to cause issue? Thanks
March 2, 2010 at 10:57 am
Great article! Thanks.
March 16, 2010 at 6:26 pm
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 ?
March 23, 2010 at 9:09 am
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..
March 23, 2010 at 10:24 am
@Khahishen It sounds like a case Of that the Google Maps API haven’t loaded properly.
March 23, 2010 at 10:58 am
thanks..
but any solution for that?
April 17, 2010 at 1:41 am
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?
July 10, 2010 at 9:29 am
Fantastic article. Saved me a day or two to experiment with all those!
July 11, 2010 at 9:00 am
Many thanks for a comprehensive and lucid article and the links to the resources – just what I needed!
Phil
July 22, 2010 at 8:49 am
learned so much from the article and from you comments. thanks. web development
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?
September 3, 2010 at 4:08 pm
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
September 16, 2010 at 7:33 am
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
September 16, 2010 at 8:31 am
@pankaj Have you tried to style it the same way styling is done in MarkerClusterer for v2 via the
stylesproperty of theMarkerClustererOptionobject? MarkerClusterer for v2 documentationMarkerClusterer for v3 seems to not have a full documentation but I think it has the same features.
September 22, 2010 at 7:13 am
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.
October 7, 2010 at 1:59 am
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…
November 3, 2010 at 8:14 pm
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?
November 5, 2010 at 2:26 am
Awesome Post!!
Are you aware of some library that would accomplish the same task in GWT?
Thanks
November 5, 2010 at 9:17 pm
Anyknow who to implement this?
http://libweb.in-vicinity.com/
I wanna do the same but, with my points
November 15, 2010 at 2:23 am
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
December 26, 2010 at 11:31 am
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.
December 29, 2010 at 2:42 pm
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);
}
January 8, 2011 at 7:38 pm
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!
January 21, 2011 at 4:13 am
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
February 18, 2011 at 12:50 am
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/
March 11, 2011 at 1:21 am
Good tutorial that I found quite useful. Thank you for sharing.
March 12, 2011 at 5:02 am
markerclusterer doesn’t work with google maps api v3
filled with old v2 code.
March 26, 2011 at 11:54 pm
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. 🙂
April 18, 2011 at 6:44 pm
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.
April 18, 2011 at 8:09 pm
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.
April 26, 2011 at 9:21 pm
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
April 28, 2011 at 12:09 pm
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.
April 28, 2011 at 10:40 pm
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)
May 28, 2011 at 8:57 am
For v3 of the maps API there is now a cluster manager available:
http://sourceforge.net/projects/fluster/
June 1, 2011 at 10:31 pm
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.
June 6, 2011 at 1:32 pm
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();
June 13, 2011 at 11:00 am
Thanks a lot man! This thing really help me out doing Clustering Image Marker. BTW, I’m using ClusterMarker. Good Job!
June 25, 2011 at 3:00 pm
Thanks a lot! This is what I’ve searched. I play with markers, but I have problem with maps v3 api…
June 27, 2011 at 6:16 pm
thank you so much
July 11, 2011 at 6:30 pm
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.
August 3, 2011 at 5:50 pm
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.
August 4, 2011 at 1:46 pm
@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.
September 19, 2011 at 12:25 am
Thanks a lot man! This thing really help me out doing Clustering Image Marker.
December 1, 2011 at 5:06 pm
Great contribution. I miss MarkerClustererPlus.
January 3, 2012 at 6:16 pm
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.
September 9, 2012 at 3:17 pm
Hi Lasse
Thank you for you input, any chance of sharing your clustering server-side algorithm source? I see it is lightning fast, we also need from 25000 up to 100000 markers.
Thanks
Regards
Johan
South africa
November 4, 2012 at 8:30 am
Hi Kim. I’ve blogged about the solution, and also included a link to the C# Sourcecode here : http://r-coding-sitecoreblog.blogspot.it/2012/09/serverside-clustering.html
The code should handle 100.000 markers just fine. So take a look at it, and please feel free to comment on any aspects on the solution on my blog.
Best Regards
Lasse Rasch
April 17, 2013 at 2:42 pm
Respect! Thank you!
March 20, 2012 at 10:04 am
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.
April 3, 2012 at 8:20 am
Fantastic information
April 19, 2012 at 12:56 pm
nice article… thnx.
July 21, 2012 at 11:27 pm
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
July 21, 2012 at 11:28 pm
thank you. great articel. Check out on http://www.nw-familyplanet.de
January 9, 2013 at 7:09 pm
Thanks for the article. It was really helpful.
June 2, 2013 at 5:19 pm
Tack! Det här sparade mig en massa jobb! =)
August 7, 2020 at 11:34 am
Very Nicley Expalined! Thanks for sharing such valuable information