As I mentioned in the comments, an alternative that probably solves your problem, even though it's not official Google, is OverlappingMarkerSpiderfier . / p>
Considering the following points, which are relatively close:
[
{
"lat":-27.6142358,
"lng":-48.4828248
},
{
"lat":-27.6142358,
"lng":-48.4828248
},
{
"lat":-27.6142358,
"lng":-48.4828248
},
{
"lat":-27.6142358,
"lng":-48.4828248
},
{
"lat":-27.6142358,
"lng":-48.4828248
}
]
To use just create the object OverlappingMarkerSpiderfier
by informing our map
, something like this:
var oms = new OverlappingMarkerSpiderfier(map);
After this we will tell him what the action will be when clicking on one of the markers, after having already exhibited the spider effect, which in our case will replace the contents of infoWindow
and display -a:
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.open(map, marker);
});
We'll also mention that when it expands, that is, the spider effect, if infoWindow
is being displayed, so that it is closed, like this:
oms.addListener('spiderfy', function(markers) {
infowindow.close();
});
Finally, every time we create a tag, we'll tell OverlappingMarkerSpiderfier
about your creation, adding it this way:
oms.addMarker(marker);
See a complete example below:
var map;
var oms;
var gm = google.maps;
var infowindow = new gm.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 11,
center: new gm.LatLng(-27.6142358, -48.4828248)
};
map = new gm.Map(document.getElementById('mapcanvas'), mapOptions);
oms = new OverlappingMarkerSpiderfier(map);
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
infowindow.close();
});
function addPosition(items) {
var content = '<div>' +
'<h3>' + items.position + '</h3>' +
'<p>Latitude: ' + items.lat + ' - Longitude: ' + items.lng + '</p>' +
'</div>';
var myLatLng = new gm.LatLng(items.lat, items.lng);
var marker = new gm.Marker({
position: myLatLng,
map: map
});
marker.description = content;
oms.addMarker(marker);
}
var jsonPoints = '[' +
' {' +
' "lat":-27.6142558,' +
' "lng":-48.4828548' +
' },' +
' {' +
' "lat":-27.6143558,' +
' "lng":-48.4828548' +
' },' +
' {' +
' "lat":-27.6142558,' +
' "lng":-48.4878248' +
' },' +
' {' +
' "lat":-27.6144351,' +
' "lng":-48.4828248' +
' },' +
' {' +
' "lat":-27.6143358,' +
' "lng":-48.4928248' +
' }' +
']';
var points = $.parseJSON(jsonPoints);
$.each(points, function(i, obj) {
var item = new Object();
item.position = "Posição - " + (i + 1);
item.lat = obj.lat;
item.lng = obj.lng;
addPosition(item);
});
}
gm.event.addDomListener(window, 'load', initialize);
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#mapcanvas {
width: 100%;
height: 100%;
position: relative;
}
<?xml version="1.0" encoding="utf-8"?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script><divid="mapcanvas" />
Notice that the zoom effect is spider , but if we zoom in, this effect will no longer be necessary
I do not know if it's exactly what you need, but I hope I've helped: