Clever Geek Handbook

Generic event handler for all Google Maps v3 markers

I have a map with 500 markers and they are redrawn when the user scrolls the map. Each of the markers is quite complex - they are numbered and have click, mouseover and mouseout events attached (to animate them). This causes some performance issues as it takes a long time to remove and add these tokens. I was wondering if I could hook up one click, mouseover and mouseout event handlers for the whole map and catch the event that bubbles from the markers. Is it possible? Will it improve performance?

I found this - How to make one event handler for all markers in Google Maps V3? - this is better, but it still requires you to bind a handler for each of the markers separately.

I also found Google Data Data Layers - https://developers.google.com/maps/documentation/javascript/datalayer#add_event_handlers - it looks like there is only one event for the whole layer, but I'm not sure if it doesn't bind it to each of the markers within the country. I'm also not sure if the extra layer of abstraction won't slow things down.

Are there any other solutions?

+3


source to share


4 answers


We solved all our problems by enabling the "optimized" flag on our markers. The markers are then rendered on the map canvas and are not visible in the DOM, which also means there are no event handlers attached to them. We implemented interactivity by creating div elements on the fly when the marker is hovered. Everything is much smoother now.



0


source


I had this problem and found a solution by creating clusters: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

This helps a lot and is actually faster than putting everything in arrays and pushing them to a 1 by one card



You can store events for each marker and group them + make it clustered.

0


source


I implemented a real estate search engine a few years ago. Think of a google map overlaid on hundreds, thousands, tens of thousands of markers.

We found that overlaying the top layers on google maps was the best solution. Overlays are supported in the Map API and can be used instead of markers to display features on the map with minimal lag. They make a good replacement for use cases that would otherwise require a lot of markers.

Using tools like maperver is pretty easy to create slabs. Combined with tiles, you also need to write a custom click handler and probably a web service that resolves coordinates for an individual marker and returns data for that marker.

0


source


I did some tests and found out that it is actually slower to use a loadGeoJson

class method google.maps.Data

than using a standard jQuery AJAX call.

I tested it with JSON with about 7000 records, creating / laying a marker for each record and binding a click event on each marker.

Below are the results of the scripting time in Chrome (average 10 requests):

  • With loadGeoJson:

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

  • Standard AJAX Request:

Average: 1.795s | High: 2.01s | Low: 1.66s

Now, if loading 500 markers on your computer is very slow, you may need to expose your code so that we can understand how you do it. Perhaps there is something that could be improved on the way you load / reload / delete your markers?

Hope this helps!

0


source






More articles:


All Articles