4

I want to check to see if any of the existing markers match the latlng of the new marker and if so then merge the info window/tooltip text.

This is what I tried to do:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>


<script type="text/javascript"> 
var map;
var mc;//marker clusterer
var mcOptions = {gridSize: 10, maxZoom: 8};
var infowindow = new google.maps.InfoWindow();//global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("42.3334,-89.1572",
"39.2058,-76.7531",
"39.7751,-86.1322",
"40.4894,-78.3499",
"42.0203,-87.9059",
"36.2673,-86.2912",
"33.6115,-84.3745",
"44.9793,-93.273",
"40.1461,-76.0738",
"32.2911,-90.1927",
"32.9315,-96.6158",
"36.0553,-79.8317",
"41.8397,-88.0887",
"47.8029,-103.267",
"34.106,-83.589",
"41.5907,-87.3199",
"43.0905,-74.3554",
"40.3438,-74.4289",
"40.8651,-96.8231",
"40.8651,-96.8231",
"41.759,-88.1524",
"38.2512,-86.8675",
"41.8119,-87.6873",
"41.3651,-89.0866",
"25.7791,-80.1978",
"41.6404,-88.0696",
"41.7684,-88.1366",
"39.7299,-86.4234",
"41.5234,-81.5996",
"41.6233,-88.0225",
"41.0171,-80.8029",
"40.2899,-82.9811",
"41.8119,-87.6873",
"32.3445,-99.8021",
"41.8119,-87.6873",
"29.8131,-95.3098",
"35.1693,-89.9904",
"33.6115,-84.3745",
"47.7374,-103.298",
"46.3502,-94.1",
"41.9907,-88.4298",
"35.3716,-80.5621",
"38.189,-85.6768",
"41.8119,-87.6873",
"32.7714,-97.2915");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20",
"UnitNo21",
"UnitNo22",
"UnitNo23",
"UnitNo24",
"UnitNo25",
"UnitNo26",
"UnitNo27",
"UnitNo28",
"UnitNo29",
"UnitNo30",
"UnitNo31",
"UnitNo32",
"UnitNo33",
"UnitNo34",
"UnitNo35",
"UnitNo36",
"UnitNo37",
"UnitNo38",
"UnitNo39",
"UnitNo40",
"UnitNo41",
"UnitNo42",
"UnitNo43",
"UnitNo44",
"UnitNo45");

//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

function createMarker(latlng,text) {

var marker = new google.maps.Marker({
position: latlng,
                map: map
});

                ///get array of markers currently in cluster
                var allMarkers = mc.getMarkers();

                //check to see if any of the existing markers match the latlng of the new marker
                if (allMarkers.length != 0) {
                for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                if (latlng.equals(pos)) {
                text = text + " & " + content[i];
                }                   
                }
                }
// WHERE TO ADD: mc.addMarker(marker); //??

google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}

function initialize(){
var options = { 
zoom: 4, 
center: new google.maps.LatLng(39.8282,-98.5795), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
};
map = new google.maps.Map(document.getElementById('map'), options); 

var gmarkers = [];
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]))
gmarkers.push(createMarker(latlng,content[i]));
}

//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i=0; i<address.length; i++) { 
geocodeAddress(address[i],i);

}
}
</script> 
<style>
html, body, #map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  }
</style>
</head>
<body onload="initialize();">
<div id="map"></div>
</body>
</html>

I tired to take this working example found here http://www.geocodezip.com/SO_OverQueryLimitB.html and add the following code into it:

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
        var existingMarker = allMarkers[i];
        var pos = existingMarker.getPosition();

        if (latlng.equals(pos)) {
        text = text + " & " + content[i];
        }                   
        }
        }

So that the final result when you click on a marker that has the same latlng it would display one info window with the merged text like the one found here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html See it shows the number 4 but displays only 3 markers that's because the one on the right side is merged with another one behind it and when you click on it it shows you the text for both. only I would like to use geocodezip's example and work on top of that since I already have the cords and don't need google to go get them for me. Thank you for just reading this LONG Question if noting else..

and Thank you 1Mill X over if you can help me find a solution.

Thanks again!!!

compcobalt
  • 1,322
  • 7
  • 31
  • 61
  • The [working example](http://stackoverflow.com/questions/17682181/google-maps-over-query-limit-but-have-long-and-lat/17683467#17683467) in the post that contains that code doesn't generate that error. – geocodezip Jul 17 '13 at 19:22
  • 1
    Correct, now I'm trying to merge that working example to this example found here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html – compcobalt Jul 17 '13 at 19:27
  • 1
    If I put your data in my example it works http://www.geocodezip.com/SO_OverQueryLimitB.html, if you are trying to add geocoding back in, you will have some challenges. Please clarify your question. – geocodezip Jul 17 '13 at 19:29
  • further more the working example that you posted does not merge the info window if there are multiple latlng that are the same. (check to see if any of the existing markers match the latlng of the new marker and merge the info window) the example here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html does this. – compcobalt Jul 17 '13 at 19:31
  • 2
    @geocodezip to clarify, I'm trying to use your working example and add check to see if any of the existing markers match the latlng of the new marker and merge the info window if it does. this site also has a example http://www.frontendfan.com/multiple-markers-with-the-exact-same-location/ – compcobalt Jul 17 '13 at 19:46

1 Answers1

22

You need to :

  1. create the marker clusterer first.
  2. add the markers to the MarkerClusterer (and format your code so it is easier to read...).

    function createMarker(latlng,text) {
      var marker = new google.maps.Marker({
        position: latlng,
        map: map
      });
    
      ///get array of markers currently in cluster
      var allMarkers = mc.getMarkers();
    
      //check to see if any of the existing markers match the latlng of the new marker
      if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
          var existingMarker = allMarkers[i];
          var pos = existingMarker.getPosition();
    
          if (latlng.equals(pos)) {
            text = text + " & " + content[i];
          }                   
        }
      }
    
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        infowindow.setContent(text);
        infowindow.open(map,marker);
      });
      mc.addMarker(marker);
      return marker;
    }
    

working example

geocodezip
  • 158,664
  • 13
  • 220
  • 245