CODEWITHSUNDEEP
google-maps
Pawan
Pawan

Reputation: 32331

How to handle Multiple Markers present at the same coordinates

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?

Upvotes: 1

Views: 10239

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133400

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

Upvotes: 1

Related Questions