How to optimize MarkerWithLabel on google maps when having too many markers

Question

I have been developing an application on google chrome, and I've been using the MarkerWithLabel library, which i believe is written by google developers. I am using a little over 100 markers on the map and it seemed to be pretty smooth until i checked in firefox (and lets not even mention IE). It is pretty damn laggy in FF. Any way to optimize it?

http://jsfiddle.net/zDTNS/2 Here is a sample in jsfiddle

To clarify, having 200 regular markers works fine. The problem shows up when using MarkerWithLabel

Answer 1

Generally speaking the best way to optimize any Google maps application is using a clustering technique. As the application loads more and more markers the client-side rendering over-head will only increase. The addition of labels only compounds the issue.

A number of clustering techniques exist and are simple to implement, I'd suggest starting with this article: https://developers.google.com/maps/articles/toomanymarkers.

Edit Leaving above in place in case anyone doesn't have the same spec requirement, but similar issue.

My only other suggestion would be to turn off the labels when above a certain zoom level? This will at least alleviate some of the worst of the rendering issues.

Edit After doing a bit of research the library introduced here has been shown to have far more favorable performance characteristics than markerWithLabel. It relies on a html canvas though so is ie9+.

Answer 2

After spending 2 weeks researching and trying all sorts of methods, most suggested on here, I arrived to the conclusion that there just is no way to optimize at the moment. For some reason firefox struggles when there are divs on top of the map and keeping them in sync. The performance on the latest firefox was almost the same as IE8.

I found that having a ton of google markers does not cause any lagging, but divs do. What I ended up doing was create a server side function that converts text to png. When initializing the google marker, you make the icon url TextToImage.aspx?text=Hello&size=13 Then I set the anchor of the new marker to (15, 15) and that became my new 'label'. I added some click and mouseover listeners to the label marker and voila! Insane improvement to performance.