Google Maps Javascript API V3 and Marker Management

It was a deep fall. I was assigned to develop a section whose main task is to indicate the location of the filtering and searching objects on the map. What became immediately noticeable - even with the display of 10 objects on the map, you can reduce the zoom to one at which they simply merge. If there are 100 of them, horrible overlays and shadows will appear. Not comme il faut!

Search for a solution

The solution is obvious, the markers need to be grouped. In the process of searching, I came across Habrostayu , which examined various ways of grouping a large number of markers on the map. We were quite satisfied with the crutches 1-2, that is, the grouping of markers on the client side, however ... if they came up, I would not write an article now;)


')
The same deep autumn the Google development team worked intensively on Google Maps JavaScript API V3 , and I used it in my work. There was no standard tool for managing the markers (what was a warning in the v2 documentation), and the recommended “open sourced MarkerManager”, of course, is not adapted to the third version of api.

There are two possible solutions - either use stable api v2 (which means not only roll back the work done, but also the inconvenience of generating keys for each domain), or write your own markermanager, with blackjack and confused.

Implementation details

Those who are interested to see what happened and how to use it, can safely skip this paragraph and move on to examples. Nothing will be shockingly new.

Grouping is carried out according to the principle “divided the map into cells; If k markers are located on the visible m * n region on the map scale, we hide these markers, draw a group marker indicating the number of covered partners. ” In general, everything. The coordinates of the group marker are the geometric center of the cell.

It would seem - everything, but it is not. Redraw, when to do it? The most accurate and deadly option - every time you move around the map. Why this option is deadly, I think, no need to explain, but how then to be? Pokumekav, I decided that redrawing the grid markers best "within reason." You probably heard this expression often, but, perhaps, you did not see so literal perception. "The limit of reasonable" - a rectangular area of ​​the map, which includes the visible area, and "a little bit behind it." As far as it goes, at 1.5 cards for each dimension, the coefficient changes.

This decision is dictated by the fact that the user, approaching a certain point, goes to his goal, and it’s necessary to keep markers outside the visible area on the map so that he is not suddenly stunned by the loss of all polymers in the process of launching.

How to use


var markerManagerOptions = {
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png",
shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"
},
cell: {
width: 48,
height: 96
},
threshold: 12,
sanity: 1.5
};

var markerManager = new GmapsMarkerManager(map, markerManagerOptions);

For a start on what is customizable. In principle, everything is quite transparent: the icon settings for the group marker, the cell size of the visible area on which the grid is built, the threshold is the approximation level at which the grouping is removed (all the markers are displayed as is), and the “reasonableness factor” described above. All parameters are optional, however, it is better to set the group marker icon;)

Further - easier.
var marker = new google.maps.Marker({position: new google.maps.LatLng(-25.363882, 131.044922)}));
markerManager.addMarker(marker);

That's all. I didn’t need to delete markers, but in order to have such an opportunity, I added the method of deleting by index in the array
markerManager.removeMarkerByNumber(0);

Conclusion

Before and after


Demo here
The source code is here .

I would be glad if this article will help someone in solving his problems, I am waiting for comments.

Conclusion Conclusion

The article was prepared not by me, but by a good person especially for Habr in the humble hope of an invite.