Google Maps MarkerClusterer is not working

0

I'm trying to use the google maps api MarkerClusterer function [link] [1]

[1]: link to group addresses but is not working, continue showing without grouping. Here's my code:

// delay between geocode requests - at the time of writing, 100 miliseconds seems to work well
var delay = 100;


  // ====== Create map objects ======
  var infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(-15.7942306, -47.8821677);
  var mapOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geo = new google.maps.Geocoder(); 
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();
  var markers;

  // ====== Geocoding ======
  function getAddress(search, markerTitle, next) {
    geo.geocode({address:search}, function (results,status)
      { 
        // If that was successful
        if (status == google.maps.GeocoderStatus.OK) {
          // Lets assume that the first marker is the one we want
          var p = results[0].geometry.location;
          var lat=p.lat();
          var lng=p.lng();             
          // Create a marker
          createMarker(search,markerTitle,lat,lng);
        }
        // ====== Decode the error status ======
        else {
          // === if we were sending the requests to fast, try this one again and increase the delay
          if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            nextAddress--;
            delay++;
          } 
        }
        next();
      }
    );
  }

 // ======= Function to create a marker
 function createMarker(add,markerTitle,lat,lng) {
   var contentString = markerTitle;
   markers = addresses.map(function(location, i) {
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(lat,lng),
         map: map,
         zIndex: Math.round(latlng.lat()*-100000)<<5
       });

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

       bounds.extend(marker.position);
   });

 }

  // ======= An array of locations that we want to Geocode ========
  var addresses = <?php echo $cords; ?>     
  // ======= Global variable to remind us what to do next
  var nextAddress = 0;

  // ======= Function to call the next Geocode operation when the reply comes back

  function theNext() {
    $('#loading').show();
    if (nextAddress < addresses.length) {
      setTimeout('getAddress("'+addresses[nextAddress][1]+'","'+addresses[nextAddress][0]+'",theNext)', delay);
      nextAddress++;
    } else {
      // We're done. Show map bounds
      map.fitBounds(bounds);
      $('#loading').hide();
    }

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }

  // ======= Call that function for the first time =======
  theNext();
    
asked by anonymous 21.03.2017 / 20:58

1 answer

0

I always follow this example in my applications and it always works perfectly.

link

    
21.03.2017 / 22:01