javascript - How to optimize MarkerWithLabel on google maps when having too many markers - Stack Overflow

admin管理员组

文章数量:1431398

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?

Here is a sample in jsfiddle

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

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/zDTNS/2 Here is a sample in jsfiddle

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

• javascript
• google-maps
• firefox
• google-maps-markers

Share Improve this question Follow edited Dec 20, 2013 at 19:06 odle asked Dec 17, 2013 at 14:36 odleodle 5,26288 gold badges3131 silver badges3333 bronze badges 7

• In v3 100 markers should be reasonable quick, it is thousands of markers where performance issues occur. I have seen reports of a slow down in adding markers in later releases, perhaps try 3.13. – geocodezip Commented Dec 17, 2013 at 16:52
• fiddle using 3.13 – geocodezip Commented Dec 17, 2013 at 16:55
• That does not seem to be an issue with me. The links you have perform the same on my machine. Chrome is smooth, Firefox lags on both. – odle Commented Dec 17, 2013 at 19:26
• What version of Firefox are you using? I get no issues on my machine but again this is dependent largely on the clients set-up and not the server side application. This is why maps applications are so difficult to optimize, and why I suggested clustering (though obviously this isn't a viable solution for you). – ChrisSwires Commented Dec 18, 2013 at 8:44
• 1 I have issues with your example: 1) no infowindow opens if I click on the markers or the labels 2) regarding the text you have there "The two markers shown here"... there are much more than two 3) where do you see the page being slow in FF - i.e. what do you mean by "It is pretty damn laggy in FF"? – Tomas Commented Dec 20, 2013 at 14:54

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

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 pounds the issue.

A number of clustering techniques exist and are simple to implement, I'd suggest starting with this article: https://developers.google./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+.

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.

If you only want a couple of characters inside a pin, another alternative is:

https://chart.apis.google./chart?chst=d_map_pin_letter&chld=${displayCharacters}|${pinColorHex}|${fontColorHex}

Check this example.

本文标签： javascriptHow to optimize MarkerWithLabel on google maps when having too many markersStack Overflow