Common Event Handler For All Google Maps V3 Markers

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 mo

Solution 1:

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.

Solution 2:

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.

Solution 3:

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):

• With loadGeoJson:

Average: 3.156s | High: 3.69s | Low: 2.75s

• Standard AJAX request:

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!

Solution 4:

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.