Ungroup tags using Google Maps API with Javascript

Question

Good afternoon

How can I design this group of markers that are located nearby using the Google Maps API? I searched however I found only Markerclusterer and other alternatives that are not from Google, modifying the default icons, and only found one that when clicking on a marker several others fall apart, but is not native to Google.

Not to mention that the problem is when the zoom is very close, and the markers are all concentrated in a street for example, as in the image below, so in this case the Markerclustered would not work.

Thank you in advance.

Answer 1

As he had cited in the comments an alternative that probably solves his problem, even though it is not official Google, is the Overlappingmarkerspiderfier.

Considering the points below, 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 informing our map, something like that:

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 displayed the effect Spider, which in our case will replace the content of infoWindow and display it:

oms.addListener('click', function(marker, event) {
    infowindow.setContent(marker.description);
    infowindow.open(map, marker);
});

We will also say that when it expands, that is, the effect Spider, case to infoWindow is being presented, so that it is closed, in this way:

oms.addListener('spiderfy', function(markers) {
    infowindow.close();
});

Finally, whenever we create a tag we will talk to the OverlappingMarkerSpiderfier about its creation, adding it in this way:

oms.addMarker(marker);

See a full 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>
<script src="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>

<div id="mapcanvas" />

Notice that in greater zoom is presented the effect Spider, but if we zoom in really high this effect will no longer be necessary

I don’t know if it’s exactly your need, but I hope I’ve helped :)

Answer 2

Esteemed

Do you know why when aggregating a new co-ordinate:

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' +
      '   }' +
      '   {' +
      '      "lat":-27.6143358,' +
      '      "lng":-48.4928248' +
      '   }' +
      ']';

Saludos Pablo.