Combine content for two markers in one infobox Google Maps

Question

I'm working with Google Maps and, for example, let's say I have two different records for same address. Instead of showing two pins I would like to display one pin and in the infobox above the pin to display the content from those two records.

This is the code I have currently:

 var infoWindow = new google.maps.InfoWindow();
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    companyname: data.companyname
                });                
                googleMarkers.push(marker);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {                  
                        infoWindow.setContent('<div style="width:250px;height:80px;"><IMG BORDER="0" width="100" height="50" style="margin-right:5px;" ALIGN="Left" SRC='+ decodeURIComponent(data.logofilename)+'>'+data.companyname+'<br /> ' + '<a href='+'javascript:NewWindow('+"'"+'../JobSeeker/JobPostingApplication.aspx?PostingID='+data.postingid+'&GetPosting=True'+"'"+')>' + data.jobtitle+'</a></div>');            
                        infoWindow.open(map, marker);
                    });
                  
                    google.maps.event.addListener(marker, "mouseover", function (e) {                            
                        infoWindow.setContent('<div style="width:250px;height:80px;"><IMG BORDER="0" width="100" height="50" style="margin-right:5px;" ALIGN="Left" SRC='+ decodeURIComponent(data.logofilename)+'>'+data.companyname+'<br /> ' + '<a href='+'javascript:NewWindow('+"'"+'../JobSeeker/JobPostingApplication.aspx?PostingID='+data.postingid+'&GetPosting=True'+"'"+')>' + data.jobtitle+'</a></div>');
                        infoWindow.open(map, marker);
                    });
                    //google.maps.event.addListener(marker, "mouseout", function (e) {                  
                    //    infoWindow.close();
                    //});
                })(marker, data);
            }

Answer 1

instead of using an array to store the markers use an object and use a hash based on the LatLng as marker-name.

Before you create a marker check if there is already an object with this name/hash, when yes, don't create a new marker, extend the existing.

Extending means: store desired infowindow-content as a marker-property. When the marker already exists, append the new content to the existing content(marker-property).

In the mouseover/click-listeners of the marker set the content of the infowindow to this property.

sample:

        var infoWindow = new google.maps.InfoWindow(),
            map = new google.maps.Map(document.getElementById("dvMap"), 
                                       mapOptions),
            googleMarkers={};
        for (i = 0; i < markers.length; i++) {

            (function (data) {
              var myLatlng    = new google.maps.LatLng(data.lat,data.lng),
                  //this hash will round the latLngs to 6 decimals
                  hash        = myLatlng.toUrlValue(),
                  iwContent   = '<div>BuildTheContentHere</div>';
              //create a new marker
              if(typeof googleMarkers[hash]==='undefined'){
                googleMarkers[hash] = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: data.title,
                      companyname: data.companyname,
                      iwContent:iwContent
                      });
                google.maps.event.addListener(googleMarkers[hash], "click", 
                    function (e) {                  
                      infoWindow.setContent(this.get('iwContent'));            
                      infoWindow.open(map, this);
                });
                google.maps.event.addListener(googleMarkers[hash], "mouseover", 
                    function(e){                  
                      infoWindow.setContent(this.get('iwContent'));            
                      infoWindow.open(map, this);
                });
              }else{
              //extend existing marker
                 googleMarkers[hash].iwContent+=iwContent;
              }

            })(markers[i]);
        }

Answer 2

Sort the markers object by companyname and check if there are duplicates. If so, combine those items into one. Do this before you create your markers. By sorting it first, you can just loop through it next and check that markers[i].companyname === markers[i-1].companyname.

Sort:

markers.sort(function (a, b) {
    if (a.companyname > b.companyname) {
        return 1;
    } else if (a.companyname < b.companyname) {
        return -1;
    } else {
        return 0;
    }
});

var j = markers.length;
while (j-- && j > 0) {
    if (markers[j].companyname === markers[j - 1].companyname) {
        //move j into j-1
        markers[j - 1].title += "\n\n" + markers[j].title;
        markers.splice(j, 1); //remove the duplicate
    }
}