Ungroup markers using Google Maps API with Javascript

3

Good afternoon

How can I ungroup this group of bookmarks that have the next location using the Google Maps API? I searched but found only the MarkerClusterer and other alternatives that do not come from Google, modifying the standard icons, and only found one that when clicking on a marker several others ungroup, 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 on a street, for example, as in the image below, so in this case MarkerClustered would not work.

Thank you in advance.

    
asked by anonymous 18.06.2015 / 21:15

2 answers

2

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:

    
19.06.2015 / 03:04
0

Dear

You know why when I add a new coordinate it stops working Example:

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' +
      '   }' +
      ']';

Greetings Paul.

    
26.04.2017 / 13:14