Google Maps V3 Overlapping Markers on exact Location

Question

I am having issues with markers overlapping, please do not down vote as I am not highly schooled in javascript also I have looked at the different answers offered on stackoverfl

Answer 1

Here is a solution without using any libraries but just simple javascript as a workaround for the overlapping issue.

It opens an infowindow only on the markers which has more then 1 markers at the same lat and lng

var maplocations = [["1200€", "52.50752849999999", "13.471243500000014", "96063", "No", 1],
["12€", "52.50752849999999", "13.471243500000014", "198866", "No", 1],
["12€", "52.504747174113696", "13.420449523925754", "228262", "No", 1],
["888€", "52.5024031", "13.377901000000065", "228317", "No", 1]]

 function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(52.530339,13.347451),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });


         groupedMapList=[];
        for(var i=0;i item[1] == maplocations[i][1] && item[2]== maplocations[i][2])){
                groupedMapList.push(maplocations[i])
            }else{
               let valueIndex = groupedMapList.findIndex(item => item[1] == maplocations[i][1] && item[2]== maplocations[i][2]);
               groupedMapList[valueIndex][5] = groupedMapList[valueIndex][5] + 1;
            }
        }

You will get a grouped list which needs to be mapped on the map. Add infowindow only to the items which are more than 1 - "groupedMapList[i][5]>1"

var groupedMapList = [ ["1200€", "52.50752849999999", "13.471243500000014", "96063", "No", 2], ["12€", "52.504747174113696", "13.420449523925754", "228262", "No", 1], ["888€", "52.5024031", "13.377901000000065", "228317", "No", 1]]

        var infowindow = new google.maps.InfoWindow();
        //   var bounds = new google.maps.LatLngBounds();
          var marker, i;
          var prevId;
          var prevMarker;

          for(i=0;i 1){
                    let contentString = '
'+ ''+ groupedMapList[i][5] +' Apartments
'
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                }

                prevId = groupedMapList[i][3];
                prevMarker = this;

                var label = this.getLabel();
                label.color="white";
                this.setLabel(label); 
                this.setZIndex(1001);

              }

            })(marker, i));

        }

    }