MarkerClusterer do Google Maps

[lenosousa 0]

Boa tarde, tenho um mapa que nele contem vários marcadores, tentei colocar a função MarkerClusterer para agrupar os marcadores proximos mas não consegui, tentei de várias formas. gostaria de saber como incremento essa função no mapa que já utilizo. Desde já agradeço..

 

Segue o código do mapa que utilizo.

<script type="text/javascript">
    // Váriáveis necessárias
var map;
var infoWindow;

// A variável markersData guarda a informação necessária a cada marcador
// Para utilizar este código basta alterar a informação contida nesta variável
var markersData = [
   {
       lat: "38.7755940",
       lng: "-9.1353670",
       nome: "Leno Sousa",
       img: "logo.png",
       cate: "/imagens/mapa/marcador.png"
   }, // não colocar vírgula no último marcador
    {
       lat: "38.7757613",
       lng: "-9.1323200",
       nome: "Leno Sousa",
       img: "logo.png",
       cate: "/imagens/mapa/marcador.png"
   }, // não colocar vírgula no último marcador
    
    {
       lat: "38.7719471",
       lng: "-9.1328779",
       nome: "Leno Sousa",
       img: "logo.png",
       cate: "/imagens/mapa/marcador.png"
   }, // não colocar vírgula no último marcador
    {
       lat: "38.7731851",
       lng: "-9.1367832",
       nome: "Leno Sousa",
       img: "logo.png",
       cate: "/imagens/mapa/marcador.png"
   }, // não colocar vírgula no último marcador
    {
       lat: "38.7746572",
       lng: "-9.1391865",
       nome: "Leno Sousa",
       img: "logo.png",
       cate: "/imagens/mapa/marcador.png"
   }, // não colocar vírgula no último marcador
];

function initialize() {
   var mapOptions = {
       zoom: 5,
       mapTypeId: 'roadmap',
       disableDefaultUI: true,
       zoomControl: true,
       styles:[{"featureType":"landscape","stylers":[{"hue":"#F1FF00"},{"saturation":-27.4},{"lightness":9.4},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#0099FF"},{"saturation":-20},{"lightness":36.4},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#00FF4F"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFB300"},{"saturation":-38},{"lightness":11.2},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00B6FF"},{"saturation":4.2},{"lightness":-63.4},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#9FFF00"},{"saturation":0},{"lightness":0},{"gamma":1}]}]
   };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
   // cria a nova Info Window com referência à variável infowindow
   // o conteúdo da Info Window será atribuído mais tarde
   infoWindow = new google.maps.InfoWindow();

   // evento que fecha a infoWindow com click no mapa
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Chamada para a função que vai percorrer a informação
   // contida na variável markersData e criar os marcadores a mostrar no mapa
   displayMarkers();

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

// Esta função vai percorrer a informação contida na variável markersData
// e cria os marcadores através da função createMarker
function displayMarkers(){

   // esta variável vai definir a área de mapa a abranger e o nível do zoom
   // de acordo com as posições dos marcadores
   var bounds = new google.maps.LatLngBounds();
   
   // Loop que vai estruturar a informação contida em markersData
   // para que a função createMarker possa criar os marcadores 
   for (var i = 0; i < markersData.length; i++){

       var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
       var nome = markersData[i].nome;
       var img = markersData[i].img;

      createMarker(latlng, nome, catmapa, catalogo_iden, img, cate, codPostal);

      // Os valores de latitude e longitude do marcador são adicionados à
      // variável bounds
      bounds.extend(latlng);  
   }

   // Depois de criados todos os marcadores
   // a API através da sua função fitBounds vai redefinir o nível do zoom
   // e consequentemente a área do mapa abrangida.
   map.fitBounds(bounds);
}


// Função que cria os marcadores e define o conteúdo de cada Info Window.
function createMarker(latlng, nome, img){
    var image = cate;
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: nome,
       icon:image
   });
    google.maps.event.addListener(marker, 'click', toggleBounce);
    
    function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
        
    
   // Evento que dá instrução à API para estar alerta ao click no marcador.
   // Define o conteúdo e abre a Info Window.
   google.maps.event.addListener(marker, 'click', function() {
      
      // Variável que define a estrutura do HTML a inserir na Info Window.
      var iwContent = '<div id="iw_container">' +
            '<div class="logo_m"><img src="/media/empresas/' + img + '"></div>' +
          '<div class="detalhes_m"><h2>' + nome + '</h2>' +
        '</div>';
      
      // O conteúdo da variável iwContent é inserido na Info Window.
      infoWindow.setContent(iwContent);

      // A Info Window é aberta.
      infoWindow.open(map, marker);
   });
}
</script>

[Lucas Guima 164]

Já procurou na net? Recebeu algum erro?

[lenosousa 0]

Procurei alguns exemplos, até achei, só que fui tentar aplicar nesse meu código e não consegui.

[Lucas Guima 164]

Não existe "não consegui".

 

O que você tentou? O que aconteceu? Deu erro? Qual erro?