Click here to Skip to main content
14,325,129 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi
I am using GoogleMap. When I have two or more markers on the exact same spot, The API only displays 1 marker - the top one. But somehow I want to show all the markers as each one will be opening distinct popup. I have searched found few solutions but none are seem to be working Anybody had similar issue and would pls share a solution??


What I have tried:

for (var i = filtered.length - 1; i >= 0; i--) {
var item = records[filtered[i]];
chosenRecords += (i == filtered.length - 1) ? item.Id : "," + item.Id;

if (filtered.length <= 30000) {
var marker = new google.maps.Marker({
removed: new google.maps.LatLng(item.lat, item.lng),
icon: icon,
title: 'Click me',
map: map,
id: item.Id,
infoWindowIndex: i
});
var infoWindow = new google.maps.InfoWindow({
removed: 'abc here'
});
google.maps.event.addListener(marker, 'click', function (event) {
//if (infowindows) {
// infowindows.close();
//}
infowindows[this.infoWindowIndex].open(map, this);
});
infowindows.push(infoWindow);
profileMarkers.push(marker);
}
Posted
Updated 29-Jun-16 0:59am
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Here is the solution:
for (var i = 0; i < filtered.length; i++) {
                var item = records[filtered[i]];
                chosenRecords += "," + item.lat ;
                chosenRecords1 += "," + item.lng;
                dup = item.cnt;
                recordCont += item.cnt;
                if (filtered.length <= 30000) {                    
                    if (dup == 1) {
                        dup = '';
                    }
                    var img;
                    if (dup > 5) {
                        img = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|a15ecb|FFFFFF';
                    }
                    else {
                        img = ((item.status == "RES") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|6abf24|FFFFFF' : (item.status == "NON") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|0061e2|FFFFFF' : (item.status == "OCP") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|e27500|FFFFFF' : (item.status == "DEC") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|eed100|FFFFFF' : (item.status == "???") ? 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|FF0000|FFFFFF' : 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + dup + '|FF0000|FFFFFF');
                    }
                    var Mrkr_txt = item.status;
                    if (dup > 1) {
                        Mrkr_txt = 'Multiple Properties'
                    }
                  //  var lb = ''+dup+''
                    var marker = new google.maps.Marker({
                         position: new google.maps.LatLng(item.lat, item.lng),
                       //  icon: ((item.status == "RES") ? markerIcon1 : (item.status == "NON") ? markerIcon2 : (item.status == "OCP") ? markerIcon3 : (item.status == "DEC") ? markerIcon4 : (item.status == "???") ? markerIcon5 : markerIcon5),                       
                        //label: lb,
                         icon: img,
                        title: Mrkr_txt,
                        map: map,                       
                    });
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100