Agregando clusterer de marcador simple al mapa de google

Question

Tengo problemas para agregar la funcionalidad de marcador de clúster a mi mapa. Lo que quiero es usar un icono personalizado para mis marcadores y cada marcador tiene su propia ventana de información que quiero poder editar.

Lo logré, pero ahora tengo problemas para agregar la funcionalidad de la biblioteca del clúster marcador. Leí algo sobre agregar marcadores a la matriz, pero no estoy seguro de qué significa exactamente. Además, todos los ejemplos con matriz que he encontrado, no tengo ventanas de información y busco el código, no encontré la forma adecuada de agregarlos.

Aquí está mi código (en su mayoría de Geocodezip.com):

<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/markerclusterer/src/markerclusterer.js"></script> 
    <style type="text/css"> 
    html, body { height: 100%; } 
    </style> 
<script type="text/javascript"> 
//<![CDATA[ 
var map = null; 
function initialize() { 
    var myOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(43.907787,-79.359741), 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
           myOptions); 

var mcOptions = {gridSize: 50, maxZoom: 15}; 
var mc = new MarkerClusterer(map, [], mcOptions); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
      }); 

     // Add markers to the map 
     // Set up three markers with info windows 

      var point = new google.maps.LatLng(43.65654,-79.90138); 
      var marker1 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.91892,-78.89231); 
      var marker2 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.82589,-79.10040); 
      var marker3 = createMarker(point,'Abc'); 

      var markerArray = new Array(marker1, marker2, marker3); 
      mc.addMarkers(markerArray, true); 


} 

var infowindow = new google.maps.InfoWindow(
    { 
    size: new google.maps.Size(150,50) 
    }); 

function createMarker(latlng, html) { 
    var image = '/321.png'; 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: image, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 

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

//]]> 
</script> 

Answer 1

Aquí es el trabajo jsfiddle demo

Una vez que se crea un grupo marcador, tendrá que añadir marcadores a ella. MarkerClusterer admite la adición de marcadores utilizando el método addMarker() y addMarkers() o proporcionando una serie de marcadores para el constructor:

cuando dicen añadir marcador para el constructor, proporcionando una serie de marcadores que es similar a hacer esto:

var markers = []; //create a global array where you store your markers 
for (var i = 0; i < 100; i++) { 
    var latLng = new google.maps.LatLng(data.photos[i].latitude, 
     data.photos[i].longitude); 
    var marker = new google.maps.Marker({'position': latLng}); 
    markers.push(marker); //push individual marker onto global array 
} 
var markerCluster = new MarkerClusterer(map, markers); //create clusterer and push the global array of markers into it. 

para agregarlo utilizando addMarker() que, básicamente, agregarlo a la agrupación como la siguiente:

var markerCluster //cluster object created on global scope 

//do your marker creation and add it like this: 
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map 

o si desea agregar una matriz:

var markerCLuster //cluster object created on global scope 

//do your marker creation and push onto array of markers: 
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map 

su referencia es a MarkerClusterer y Simple Examples

Sobre la base de fragmento de código que se quiere hacer algo como esto:

var mcOptions = {gridSize: 50, maxZoom: 15}; 
    var mc = new MarkerClusterer(map, [], mcOptions); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
      }); 

     // Add markers to the map 
     // Set up three markers with info windows 

      var point = new google.maps.LatLng(43.65654,-79.90138); 
      var marker1 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.91892,-78.89231); 
      var marker2 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.82589,-79.10040); 
      var marker3 = createMarker(point,'Abc'); 

      var markerArray = new Array(marker1, marker2, marker3); 
      mc.addMarkers(markerArray, true); 

No están creando sus fabricantes correctamente por nombrar todo su marcador al mismo var , por lo que en realidad está creando tres marcadores y se sobrescribe cuando lo almacena en el marcador var cada vez. Así que continué y cambié el nombre de tus marcadores. Luego creé una matriz para almacenarlos y pasarlos a MarkerClusterer.

ACTUALIZACIÓN: a su función createMarker, que no respondió el marcador y, a continuación, no hay ningún marcador a agruparse:

function createMarker(latlng, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

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

    return marker; 
}