1

I have got multiple markers at the same position (the longitude and latitude)

This is my fiddle:

http://jsfiddle.net/ZLuTg/1014/

This is my code:

var map;
var global_markers = [];    
var markers = [[37.09024, -95.712891, 'trialhead0'], [37.09024, -95.712891, 'trialhead1'], [37.09024, -95.712892, 'trialhead2']];

var infowindow = new google.maps.InfoWindow({});

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    addMarker();
}

function addMarker() {
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }
}

window.onload = initialize;

Right now, this is showing only one Marker, could you please let me know how to handle this?

Means how can I handle it to show, so that it shows all 3 markers?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Pawan
  • 31,545
  • 102
  • 256
  • 434
  • possible duplicate of [Google Maps Multiple markers with the exact same location Not working](http://stackoverflow.com/questions/17708252/google-maps-multiple-markers-with-the-exact-same-location-not-working) – geocodezip May 20 '15 at 17:07
  • possible duplicate of [Google Maps API V3 Indicate multiple markers in same location by different icon](http://stackoverflow.com/questions/24439999/google-maps-api-v3-indicate-multiple-markers-in-same-location-by-different-icon) – geocodezip May 20 '15 at 17:10

1 Answers1

1

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

Community
  • 1
  • 1
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107