Google Maps API V3 - Multiple Markers on Exact Same Spot

Google maps API V3 - multiple markers on exact same spot

Take a look at OverlappingMarkerSpiderfier.

There's a demo page, but they don't show markers which are exactly on the same spot, only some which are very close together.

But a real life example with markers on the exact same spot can be seen on http://www.ejw.de/ejw-vor-ort/ (scroll down for the map and click on a few markers to see the spider-effect).

That seems to be the perfect solution for your problem.

How to handle Multiple Markers present at the same coordinates

In this case you need to move slightly each marker so that they do not overlap each other and the for indicate that there are more marker grouped you can use a marker cluster
you can see many examples in StackOverflow

Adding simple marker clusterer to google map
and you can see inside a useful jsfiddl

Google Maps API V3 Indicate multiple markers in same location by different icon

If all you need to do is check the previous marker, just keep a reference to it:

var lastMarker = null;
for (i = 0; i < locations.length; i++) 
{  
  var marker = new gm.Marker({
    position: new gm.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: MarkerImg,
  });
  if (!!lastMarker && !!lastMarker.getPosition &&
      (marker.getPosition().equals(lastMarker.getPosition()))) {
       marker.setIcon(MarkerImg2);
  }
  lastMarker = marker;
}

fiddle

Note: be careful with google.maps.LatLng.equals, the coordinates have to be exactly the same. Might want to pick a threshold (say 0.1 meter) and consider markers that are closer than that "at the same location".

More than one marker on same place - MarkerClusterer

Finally got it working. This is for all those who still haven't found a solution. Below code adds offset to the markers on same location:

In your createMarker function add this code:

//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;

//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;

//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
    for (i=0; i < allMarkers.length; i++) {
        var existingMarker = allMarkers[i];
        var pos = existingMarker.getPosition();

        //if a marker already exists in the same position as this marker
        if (latlng.equals(pos)) {
            //update the position of the coincident marker by applying a small multipler to its coordinates
            var newLat = latlng.lat() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            var newLng = latlng.lng() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
            finalLatLng = new google.maps.LatLng(newLat,newLng);
        }
    }
}

Refer this

Now update your google.maps.Marker object for each marker with new position value – finalLatLng.

var marker = new google.maps.Marker({
    map: msf_namespace.mapParams.resultmap,
    position: finalLatLng,
    title: name,
    icon: markericon
});

//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.push(marker);

Google Maps Multiple markers with the exact same location Not working

You need to :

1. create the marker clusterer first.

2. add the markers to the MarkerClusterer (and format your code so it is easier to read...).

   function createMarker(latlng,text) {
     var marker = new google.maps.Marker({
       position: latlng,
       map: map
     });
   
     ///get array of markers currently in cluster
     var allMarkers = mc.getMarkers();
   
     //check to see if any of the existing markers match the latlng of the new marker
     if (allMarkers.length != 0) {
       for (i=0; i < allMarkers.length; i++) {
         var existingMarker = allMarkers[i];
         var pos = existingMarker.getPosition();
   
         if (latlng.equals(pos)) {
           text = text + " & " + content[i];
         }                   
       }
     }
   
     google.maps.event.addListener(marker, 'click', function() {
       infowindow.close();
       infowindow.setContent(text);
       infowindow.open(map,marker);
     });
     mc.addMarker(marker);
     return marker;
   }
   

working example

How to deal with multiple Google Maps markers on the exact same position

So perhaps as you are looping through your coordinates adding all the markers, you could check if any previous marker has the same latlng. If it has you could use a different marker, e.g one numbered '2'. Or to do the Google Earth thing, offset each marker slightly, and draw a polyline from the markers to the original location.

Google Maps JS API v3 - Simple Multiple Marker Example

This is the simplest I could reduce it to:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

‍ Edit/fork on a Codepen →

SCREENSHOT

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:

❯ Mozilla Dev Center: Working with Closures

---

Related Topics