Google Maps - Marker Cluster display wrong number of markers within a cluster

StackOverflow https://stackoverflow.com/questions/17005290

Question

in my code Marker Cluster display wrong number of markers within a cluster, accurately displays twice as many number of markers that are actually within a cluster. I use custom icon and I guess that google.maps.MarkerOptions object specification for icon make this double counting

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

The whole code is shown below.

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Free Camping</title>
    <script type="text/javascript" src="http://maps.googleapis.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">
<!--
//<![CDATA[

//markers cluster
var markerscluster = [];
//markers cluster

//*** Dragable Marker 1/3 - Start *** //
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').value = [
    latLng.lat(),
    //latLng.lng()
  ].join(', ');
    document.getElementById('info2').value = [
    //latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}
//*** Dragable Marker 1/3 - End *** //

    function load() {

      var latLng = new google.maps.LatLng(-25.878994,134.018553);  
      geocoder = new google.maps.Geocoder();
      var map = new google.maps.Map(document.getElementById("map"), {
        center: latLng,
        zoom: 4,
        mapTypeId: 'roadmap'
      });

      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("free_camping_phpsql.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var category = markers[i].getAttribute("category");
          var name = markers[i].getAttribute("name");
          var street = markers[i].getAttribute("street");
          var locality = markers[i].getAttribute("locality");
          var description = markers[i].getAttribute("description");
          var image = markers[i].getAttribute("image");
          var toilet = markers[i].getAttribute("toilet");
          var bbq = markers[i].getAttribute("bbq");
          var able = markers[i].getAttribute("able");
          var tentok = markers[i].getAttribute("tentok");
          var caravanok = markers[i].getAttribute("caravanok");
          var dumppoint = markers[i].getAttribute("dumppoint");
          var shade = markers[i].getAttribute("shade");
          var water = markers[i].getAttribute("water");
          var swimming = markers[i].getAttribute("swimming");
          var fishing = markers[i].getAttribute("fishing");
          var hiking = markers[i].getAttribute("hiking");
          var mobileok = markers[i].getAttribute("mobileok");
          var name2 = markers[i].getAttribute("name2");
          var email = markers[i].getAttribute("email");
          var lat = markers[i].getAttribute("lat");
          var lng = markers[i].getAttribute("lng");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

         var html = '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>'  
         + '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 14px; text-align: left">' + street + '</br>' 
         + locality + '</br>'
         + lat + ', &nbsp;' + lng + '</p>'  
         + '<img src="Free-Camping/images/'+image+'" width=150; height=150;>' + '</br>'
         + '<a href="Free-Camping/images/'+image+'" target="_blank">(enlarge image)' + '</a>'
         + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description  + '</p>'
         // Checkbox
         + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 12px; text-align: left;">  Toilet: &nbsp;' + toilet + '<br>'  
         + 'BBQ: &nbsp;' + bbq + '<br>'   
         + 'Table: &nbsp;' + able + '<br>'  
         + 'Tent: &nbsp;' + tentok + '<br>'   
         + 'Caravan: &nbsp;' + caravanok + '<br>'  
         + 'Dumppoint: &nbsp;' + dumppoint + '<br>'  
         + 'Shade: &nbsp;' + shade + '<br>'   
         + 'Water: &nbsp;' + water + '<br>'   
         + 'Swimming: &nbsp;' + swimming + '<br>'  
         + 'Fishing: &nbsp;' + fishing + '<br>'   
         + 'Hiking: &nbsp;' + hiking + '<br>'   
         + 'Mobile: &nbsp;' + mobileok + '</p>';

 var customIcons = {
      "1": {
        icon: 'Free-Camping/markers/BeachCampingSite.png',
      },      
      "2": {
        icon: 'Free-Camping/markers/BushCampingSite.png',
      },  
      "3": {
        icon: 'Free-Camping/markers/ParkForestReserve.png',
      },
      "4": {
        icon: 'Free-Camping/markers/PrivateCampingSite.png',
      },
      "5": {
        icon: 'Free-Camping/markers/RoadsideRestArea.png',
      },
      "6": {
        icon: 'Free-Camping/markers/NewLocationMarker.png',
      } 
    };

          var icon = customIcons[category] || {};

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

//markers cluster
markerscluster.push(marker);
//markers cluster

        bindInfoWindow(marker, map, infoWindow, html); 
        }   

//markers cluster
var markerCluster = new MarkerClusterer(map, markerscluster, {
    gridSize: 60,
    minimumClusterSize: 1,
    maxZoom: 5  
});
//markers cluster

//*** Dragable Marker 2/3 - Start *** //
      var marker2 = new google.maps.Marker({
      position: latLng,
      title: 'Point A',
      map: map,
      draggable: true
      });

     // Update current position info.
     updateMarkerPosition(latLng);
     geocodePosition(latLng);

    // Add dragging event listeners.
    google.maps.event.addListener(marker2, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker2, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker2.getPosition());
    });

    google.maps.event.addListener(marker2, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker2.getPosition());
    });
//*** Dragable Marker 2/3 - End *** //

      });  
    }

    //*** Dragable Marker 3/3 - Start *** //
    // Onload handler to fire off the app. 
    google.maps.event.addDomListener(window, 'load', load);
    //*** Dragable Marker 3/3 - End *** //

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }


    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

//]]>
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#submit').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_2.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_1.png'});                }
        );
    });
</script>

</head>

<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">

<div id="main_layer" style="position:absolute; left:50%; top:25px; width:788px; height:1800px; margin-left: -390px;">

<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Free-Camping/images2/MapCentreIcon_2.png',1)"><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></a></div>
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>


<div id="legend" style="position:absolute; top:550px; width:760px; height:45px; margin-left: 10px;">

<div id="image Beach Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 10px;"><img src="Free-Camping/markers/BeachCampingSite.png" width="32" height="37">
</div>
<div id="text Beach Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 42px;"><span class="legend_text">Beach Camping Site</span>
</div>

<div id="image Bush Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 160px;"><img src="Free-Camping/markers/BushCampingSite.png" width="32" height="37">
</div>
<div id="text Bush Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 192px;"><span class="legend_text">Bush Camping Site</span>
</div>

<div id="image Park Forest Reserve" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 310px;"><img src="Free-Camping/markers/ParkForestReserve.png" width="32" height="37">
</div>
<div id="text Park Forest Reserve" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 342px;"><span class="legend_text">Park Forest Reserve</span>
</div>

<div id="image Private CampingS Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 460px;"><img src="Free-Camping/markers/PrivateCampingSite.png" width="32" height="37">
</div>
<div id="text Private CampingS Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 492px;"><span class="legend_text">PrivateCampingSite</span>
</div>

<div id="image Roadside Rest Area" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 610px;"><img src="Free-Camping/markers/RoadsideRestArea.png" width="32" height="37">
</div>
<div id="text Roadside Rest Area" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 642px;"><span class="legend_text">Roadside Rest Area</span>
</div>

</div>


<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1180px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">

<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:335px;" class="form2">
  <p align="center" class="headers">Add a New Free Camping Site</p>
  <p align="center"><span class="text">Your Name:</span>      <input type="text" name="name2" />
      <br>
      <br>

      <span class="text">Your Email:</span>  
      <input type="text" name="email" />
  <br>
  <br>

  <span class="text">Campsite name*:</span>  
  <input type="text" name="name" />
  <br>
  <br>

  <span class="text">Campsite Street:</span>  
  <input name="street" type="text" size="26" />
  <br>
  <br>

  <span class="text">Campsite Locality:</span>  
  <input name="locality" type="text" size="25" />
  <br>
  <br>

  <span class="text">Type of Campsite*:</span>
  <select name="category">
    <option value="1">Beach Camping Site</option>
    <option value="2">Bush Camping Site</option>
    <option value="3">Park Forest Reserve</option>
    <option value="4">Private Camping Site</option>
    <option value="5">Roadside Rest Area</option>
  </select>
  <p align="center" class="text">
  <label>Upload Picture</label>
 <input type="file" name="image" /><br>
</div>

<div id="form" style="position:absolute; left:14; top:335px; width:760px; height:150px;" class="form2">
  <p align="center" class="headers">Select Campsite Amenities</p>
  <p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44">   </p>

  <div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="toilet" value="No">
  <input type="checkbox" name="toilet" value="Yes">
  </div>

  <div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="bbq" value="No">
  <input type="checkbox" name="bbq" value="Yes">
  </div>

  <div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="able" value="No">
  <input type="checkbox" name="able" value="Yes">
  </div>

  <div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="tentok" value="No">
  <input type="checkbox" name="tentok" value="Yes">
  </div>

  <div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="caravanok" value="No">
  <input type="checkbox" name="caravanok" value="Yes">
  </div>

  <div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="dumppoint" value="No">
  <input type="checkbox" name="dumppoint" value="Yes">
  </div>

  <div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="shade" value="No">
  <input type="checkbox" name="shade" value="Yes">
  </div>

  <div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="water" value="No">
  <input type="checkbox" name="water" value="Yes">
  </div>

  <div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="swimming" value="No">
  <input type="checkbox" name="swimming" value="Yes">
  </div>

  <div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="fishing" value="No">
  <input type="checkbox" name="fishing" value="Yes">
  </div>

  <div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="hiking" value="No">
  <input type="checkbox" name="hiking" value="Yes">
  </div>

  <div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="mobileok" value="No">
  <input type="checkbox" name="mobileok" value="Yes">
  </div>

  <p align="center"><br>
</div>

<div id="form" style="position:absolute; left:14; top:485px; width:760px; height:625px;" class="form2"> 
  <div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span>    </p>
  </div>
  <p align="center">    <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
    <br>
    </p>
  <p align="center" class="headers">Location of the Free Campsite</p>
  <p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p>
  <div align="center"><br align="center" class="text"> 
      <span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br>
  </div>
  <div class="text" id="infoPanel">
    <div align="center"><b>Marker status:</b>
    </div>
    <div align="center" id="markerStatus">
      <div align="center"><i>Click and drag the marker.</i></div>
    </div>
    <div align="center"><b>Closest matching address:</b>
    </div>
    <div align="center" id="address"></div>
  </div>

            <p align="center"><span class="text">Latitude*:</span>
              <input size="20" type="text" align="center" id="info" name="lat" /><br>
            <br>
            <span class="text">Longitude*:</span>        
            <input size="20" type="text" align="center" id="info2" name="lng"/><br>
            <br>

            <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
            <input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/>
            </p>

<p align="left"><span class="text"><em> * - Mandatory Fields </em></span> </p>

</div>
</div>
</div>
</body>
</html>

I would appreciate the help.

Best, Darko

Was it helpful?

Solution

Your "load" function is being called two times.

once here:

google.maps.event.addDomListener(window, 'load', load);

and once in the body onload

<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">

(normally the first would just over write the second, but it looks like your HTML is invalid)

  1. you shouldn't call it twice on page load
  2. you shoud clear the markers out of the MarkerClusterer at the begining, it looks like your code will call it again (in an onclick event).
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top