I have a map that shows 500 markers and they are redrawn when the user scrolls the map. Each of the markers is quite complicated - they're numbered and have click, mouseover and mouseout (to animate them) events attached. This causes some performance issues because removing and adding these markers takes a lot of time. I've been wondering if I could attach a single click, mouseover and mouseout event handlers for the whole map and catch the event that bubbles up from the markers there. Is this possible? Would it improve the performance?
I've found this - How do I make a single event handler for all markers in Google Maps V3? - it's better, but it still requires attaching the handler to each of the markers separately.
I've also found Google Maps Data Layers - https://developers.google.com/maps/documentation/javascript/datalayer#add_event_handlers - it looks like there's only one event attached for the whole layer, but I'm not sure if it doesn't attach it to each of the markers internally anyway. I'm also not sure if the additional level of abstraction won't slow the things down.
Are there any other solutions?
I had that issue and found the solution by making clusters: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
This helps a lot and is actually faster than placing everything in arrays, and pushing them to the map 1 by one
You can keep the events for each marker and group them + make it clustered.
I implemented a real estate search engine a few years ago. Think a stock google map overlayed with hundreds, thousands, tens of thousands of markers.
We found that tile overlays on top of google maps were the best performing solution. Overlays are supported in the maps API and can be used in place of markers to show objects on the map with minimal lag. They make a good substitute for use cases which would otherwise require a large number of markers.
Using tools such as mapserver its fairly easily to generate the tiles. In conjunction with the tiles you also need to write a custom click handler and likely a webservice which resolves coordinates to an individual marker and returns data for that marker.
I have made a few tests and found out that it is actually slower to use the loadGeoJson method of the google.maps.Data class than to use a standard jQuery AJAX call.
I have tested it with a JSON with around 7000 entries, creating/plotting a marker for each entry and binding a click event on each marker.
Here are the results of the scripting time in Chrome (average of 10 requests):
Average: 3.156s | High: 3.69s | Low: 2.75s
Average: 1.795s | High: 2.01s | Low: 1.66s
Now if loading 500 markers is really slow on your end, you might want to expose your code so that we have an idea of how you do it. Maybe there is something that can be improved in the way you load/reload/remove your markers?
Hope this helps!
We resolved all our problems by enabling the "optimized" flag on our markers. Then the markers are rendered on the map canvas and they aren't visible in the DOM, which also means that there are no event handlers attached to them directly. We implemented interactivity by creating div elements on the fly when a marker is hovered. Everything is much smoother now.
