Google Maps Marker Clusterer: markers never cluster

Question

I don't know why the marker clusterer don't show my markers grouped, like here: http://media.svennerberg.com/2009/01/screenshot_clusterereffect.jpg

I am facing a problem in Google map marker clustering. I am using api v3, but due to some reasons, which I am not able to figure out, I cannot apply marker clustering. I'd be thankful for any help and suggestions.

My Code is like this:

 <!DOCTYPE HTML> <html lang="pl"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=myMap"></script> <script type="text/javascript"> var map; var infoWindow; var markersData = [ {lat: 50.25202, lng: 19.015023, name: "Test1", address1: "Test1", address2: "Test1", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 49.824791, lng: 19.040867, name: "Test2", address1: "Test2", address2: "Test2", address3: "2019-03-22", address4: "2019-03-22", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 50.334918, lng: 18.14136, name: "Test3", address1: "Test3", address2: "Test3", address3: "2019-03-08", address4: "2019-03-08", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 49.825794, lng: 19.040889, name: "Test4", address1: "Test4", address2: "Test4", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, ] function initialize() { var mapOptions = { center: new google.maps.LatLng(50.57628900072813,21.356987357139587), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); displayMarkers(); // I added a marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, marker, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); // End } google.maps.event.addDomListener(window, 'load', initialize); function displayMarkers(){ var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markersData.length; i++){ var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var address3 = markersData[i].address3; var address4 = markersData[i].address4; var image = markersData[i].ikona; var wwwsite = markersData[i].wwwsite; createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite); bounds.extend(latlng); } map.fitBounds(bounds); } function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){ var marker = new google.maps.Marker({ map: map, position: latlng, title: name, icon: image }); google.maps.event.addListener(marker, 'click', function() { var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' +address3 + '<br />' +address4 + '<br />' + wwwsite + '</div></div>'; infoWindow.setContent(iwContent); infoWindow.open(map, marker); }); } </script> <!-- I added a javascript markerclusterer --> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <!-- End --> </head> <body> <h2 class="przeg">Map:</h2> <div id="map-canvas"style="width:100%;height:600px;"> </div> </body> </html>

Answer 1

Looking at the example in the documentation and your code, probably the simplest "fix" is to instantiate the marker clusterer inside your display markers routine, then add each marker to the clusterer as it is created:

Comments:

you have have a callback specified in you script include ( &callback=myMap ), but no function of that name (just remove that from your script include). Causes this error in the console:

"myMap is not a function"

There is a javascript error Uncaught ReferenceError: marker is not defined on this line: var markerCluster = new MarkerClusterer(map, marker, because there is no variable marker available in that scope (and as @MrUpsidown observed in his comment, that should be the array of markers). To address that I suggest using the MarkerClusterer.addMarker method to add markers to it in displayMarkers , and changing your createMarker function to return the marker it creates.

  function displayMarkers() {
    // marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, [], {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markersData.length; i++) {
      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var address3 = markersData[i].address3;
      var address4 = markersData[i].address4;
      var image = markersData[i].ikona;
      var wwwsite = markersData[i].wwwsite;

      markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite));
      bounds.extend(latlng);
    }
    map.fitBounds(bounds);
  }

  function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) {
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name,
      icon: image
    });
    google.maps.event.addListener(marker, 'click', function() {
      var iwContent = '<div id="iw_container">' +
        '<div class="iw_title">' + name + '</div>' +
        '<div class="iw_content">' + address1 + '<br />' +
        address2 + '<br />' + address3 + '<br />' + address4 + '<br />' +
        wwwsite + '</div></div>';
      infoWindow.setContent(iwContent);
      infoWindow.open(map, marker);
    });
    return marker;
  }

proof of concept fiddle

code snippet:

 html, body { height: 100%; margin: 0; padding: 0; }

 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script type="text/javascript"> var map; var infoWindow; var markersData = [ { lat: 50.25202, lng: 19.015023, name: "Test1", address1: "Test1", address2: "Test1", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 49.824791, lng: 19.040867, name: "Test2", address1: "Test2", address2: "Test2", address3: "2019-03-22", address4: "2019-03-22", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 50.334918, lng: 18.14136, name: "Test3", address1: "Test3", address2: "Test3", address3: "2019-03-08", address4: "2019-03-08", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 49.825794, lng: 19.040889, name: "Test4", address1: "Test4", address2: "Test4", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, ] function initialize() { var mapOptions = { center: new google.maps.LatLng(50.57628900072813, 21.356987357139587), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); displayMarkers(); // End } google.maps.event.addDomListener(window, 'load', initialize); function displayMarkers() { // marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, [], { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markersData.length; i++) { var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var address3 = markersData[i].address3; var address4 = markersData[i].address4; var image = markersData[i].ikona; var wwwsite = markersData[i].wwwsite; markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite)); bounds.extend(latlng); } map.fitBounds(bounds); } function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) { var marker = new google.maps.Marker({ map: map, position: latlng, title: name, // icon: image - so shows default icon in code snippet }); google.maps.event.addListener(marker, 'click', function() { var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' + address3 + '<br />' + address4 + '<br />' + wwwsite + '</div></div>'; infoWindow.setContent(iwContent); infoWindow.open(map, marker); }); return marker; } </script> <!-- markerclusterer script --> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <!-- End --> <h2 class="przeg">Map:</h2> <div id="map-canvas" style="width:100%;height:80%;"> </div>

Google Maps Marker Clusterer: markers never cluster

Question

1 answers

solution1
0 2019-03-09 17:34:04

Google Maps Marker Clusterer: markers never cluster

Question

1 answers

solution1 0 2019-03-09 17:34:04

solution1
0 2019-03-09 17:34:04