How to handle markers exact present at the same location

Question

I am using google Maps to display my data present in Database . I also needs to show Markers available , the issue i am facing is that sometimes the Marker data is present at the same coordinates .

This is my fiddle

In this case , how can i show , my markers when clicked on it ??

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();
    markerCluster = new MarkerClusterer(map, global_markers);
}

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;
        global_markers.push(marker);
        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }
}
var markerCluster;
window.onload = initialize;

score 0 · Accepted Answer · edited May 23 '17 at 12:26

0

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

edited May 23 '17 at 12:26

Community

1
1

answered May 25 '15 at 09:33

ScaisEdge

131,976
10
91
107

Thanks , if the Marker coordinates are at same coordinates , http://jsfiddle.net/rD8U6/602/ , that is not showing markers – May 25 '15 at 09:37
Yes the jsfiddle is for show how display marker cluster. For the marker yuo can set the position with a small difference in lat, lng eg adding + 0.00001 for every marker in the same original place – ScaisEdge May 25 '15 at 09:46
I was following this link to achive that programatically http://stackoverflow.com/questions/20490654/more-than-one-marker-on-same-place-markerclusterer , but i have no clue of this lines , var allMarkers = namespace.mapParams.mapMarkersArray; var finalLatLng = latlng; var pos = existingMarker.getPosition(); which were used in the answer . – May 25 '15 at 09:51
Thanks for your helping hand , i tried your fiddle , when i clicke don the Marker Icon (2) , it is not showing any markers know . – May 25 '15 at 10:09
You must zoom in and at a certain zoom you see the two marker – ScaisEdge May 25 '15 at 10:10
Easy, the coordinates are too close to each other. Try increasing the ccordinate of 0.00003 of each marker – ScaisEdge May 25 '15 at 10:27
I tried to do that this way programticaly , zIndex: Math.round(latlng.lat() * 3434) , how can i do thtat programaticaaly – May 25 '15 at 10:30
I have tried also and zomming in i see 3 marker. try with a larger increment if you don't see – ScaisEdge May 25 '15 at 10:31
Z Index is for place one marker on top of another. for show the market you need to change the lat, lng eg : lat = lat + 0.0005 – ScaisEdge May 25 '15 at 10:33
sorry , i am new and i have got new clue of what you were refering , this is waht i am trying as per your updates with you , http://jsfiddle.net/6wp7enot/2/ – May 25 '15 at 10:37
No problem is easy give me a minute – ScaisEdge May 25 '15 at 10:40
Your last jsFindle not function for me but anyway starts from jsFindle that function and just try to change the coordinates array MyPoints this: original array MyPoints `var = [[43.65654, -79.90138, 'ABC'], [43.65654, -79.90138, 'DEF'], [43.65654, -79.90138, 'GHA']]; ` array with points slightly displaced MyPoints `var = [[43.65654, -79.90138, 'ABC'], [43.65657, -79.90141, 'DEF'], [43.65660, -79.90144, 'GHA']]; ` I just added it to 0.00003 Lat Lng both points – ScaisEdge May 25 '15 at 10:48
Thank you , The problem is that i cannot harcode the values , as they comes from datatabase – May 25 '15 at 10:57

How to handle markers exact present at the same location

1 Answers1

Linked