Aggiunta di un semplice marcatore di cluster a google map

Sto riscontrando problemi con l’aggiunta della funzionalità di cluster marker alla mia mappa. Quello che voglio è usare l’icona personalizzata per i miei marcatori e ogni marcatore ha la sua finestra informativa che voglio essere in grado di modificare.

L’ho fatto, ma ora ho problemi con l’aggiunta della funzionalità di libreria clusterer marker. Ho letto qualcosa sull’aggiunta di marcatori all’array, ma non sono sicuro di cosa significherebbe esattamente. Inoltre, tutti gli esempi con array che ho trovato, non hanno windows di informazioni e cercando nel codice non ho trovato il modo appropriato per aggiungerli.

Ecco il mio codice (principalmente da Geocodezip.com):

   html, body { height: 100%; }   //<![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)<  

Ecco la demo di jsfiddle funzionante

Una volta creato un cluster di marcatori, ti consigliamo di aggiungere degli indicatori. MarkerClusterer supporta l’aggiunta di marcatori usando il metodo addMarker() e addMarkers() o fornendo una matrice di marcatori al costruttore:

Quando dicono aggiungere marcatore al costruttore fornendo una matrice di marcatori è simile a fare questo:

 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. 

Per aggiungerlo usando addMarker() lo aggiungi fondamentalmente al cluster come segue:

 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 se vuoi aggiungere un array:

 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 

Ecco il riferimento a MarkerClusterer e Simple Examples

In base allo snippet del tuo codice, vorresti fare qualcosa del genere:

  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); 

Non stai creando correttamente i tuoi creatori nominando tutti i tuoi marcatori sullo stesso var marker modo da creare effettivamente tre marcatori e viene sovrascritto quando lo memorizzi nel var marker ogni volta. Così ho continuato e rinomina i tuoi marcatori. Ho quindi creato una matrice per archiviarli e passare a MarkerClusterer.

AGGIORNAMENTO : per la funzione createMarker , non hai restituito l'indicatore e quindi non c'è alcun indicatore da raggruppare:

 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; }