Originariamente inviata da
GANDULE
Ciao a tutti,
sto cercando di smanettare un pò con le API di Google Maps.
Purtroppo non riesco a capire come mai non viene messo in opera il cluster... tutto il resto funziona correttamente, salvo questo particolare del Cluster... non riesco proprio a capire...
La cosa stranissima che non capisco è come mai sembri che l'array "marker_list" che dovrebbe contenere i vari marker da "clusterizzare" venga caricato alla fine di tutto il processo e non durante la creazione dei Marker...
Avete qualche suggerimento?
Vi posto il codice sviluppato finora...
codice:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!--<script src="http://maps.google.com/maps?file=api&v=3&key=AIzaSyD5ZqS1BdQsnMRJNTtq948l517BGL6zlb4&sensor=true"
type="text/javascript"></script> -->
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5ZqS1BdQsnMRJNTtq948l517BGL6zlb4&sensor=true"> </script>-->
<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>
<script type="text/javascript">
var map;
var marker_list = [];
var marker;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(40.320373, 9.324818),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ROSSO = "ROSSO.png";
var VERDE = "VERDE.png";
var ORO = "ORO.png";
var BLU = "BLU.png";
var Immagine = "<img src='neg.jpeg' width:150 height:150>";
var geocoder = new google.maps.Geocoder();
var contentString;
/********************CODICE STEFANO AZIENDA 1 ******************/
Riga0 = "Prova1"; //Nome del rivenditore
Riga1 = "Roma"; //Indirizzo o località dove visualizzare il marcatore
Riga3 = "Produzione"; //Informazione relativa al fatturato
Colore = ORO; //INSERIRE BLU ORO ROSSO VERDE a seconda del colore che si vuole affidare al marcatore
contentString = "<p>"+Riga0+"</p><p>"+Riga1+"</p><p><strong>"+Riga3+"</strong></p><p>" + Immagine + "</p>";
geocoder.geocode({ 'address': Riga1}, callbackGeocode(contentString, Riga3, Colore));
/******************FINE CODICE STEFANO AZIENDA 1*****************/
/********************CODICE STEFANO AZIENDA 2 ******************/
Riga0 = "Prova2"; //Nome del rivenditore
Riga1 = "Viterbo"; //Indirizzo o località dove visualizzare il marcatore
Riga3 = "prova2"; //Informazione relativa al fatturato
Colore = ROSSO; //INSERIRE BLU ORO ROSSO VERDE a seconda del colore che si vuole affidare al marcatore
contentString = "<p>"+Riga0+"</p><p>"+Riga1+"</p><p><strong>"+Riga3+"</strong></p><p>" + Immagine + "</p>";
geocoder.geocode({ 'address': Riga1}, callbackGeocode(contentString, Riga3, Colore));
/******************FINE CODICE STEFANO AZIENDA 1*****************/
/********************CODICE STEFANO AZIENDA 2 ******************/
Riga0 = "Prova3"; //Nome del rivenditore
Riga1 = "Cervetieri"; //Indirizzo o località dove visualizzare il marcatore
Riga3 = "prova3"; //Informazione relativa al fatturato
Colore = ROSSO; //INSERIRE BLU ORO ROSSO VERDE a seconda del colore che si vuole affidare al marcatore
contentString = "<p>"+Riga0+"</p><p>"+Riga1+"</p><p><strong>"+Riga3+"</strong></p><p>" + Immagine + "</p>";
geocoder.geocode({ 'address': Riga1}, callbackGeocode(contentString, Riga3, Colore));
/******************FINE CODICE STEFANO AZIENDA 1*****************/
/********************CODICE STEFANO AZIENDA 2 ******************/
Riga0 = "Prova4"; //Nome del rivenditore
Riga1 = "Fiumicino"; //Indirizzo o località dove visualizzare il marcatore
Riga3 = "prova4"; //Informazione relativa al fatturato
Colore = ROSSO; //INSERIRE BLU ORO ROSSO VERDE a seconda del colore che si vuole affidare al marcatore
contentString = "<p>"+Riga0+"</p><p>"+Riga1+"</p><p><strong>"+Riga3+"</strong></p><p>" + Immagine + "</p>";
geocoder.geocode({ 'address': Riga1}, callbackGeocode(contentString, Riga3, Colore));
/******************FINE CODICE STEFANO AZIENDA 1*****************/
var markerCluster = new MarkerClusterer(map, marker_list,
{
gridSize:40,
minimumClusterSize: 4,
calculator: function(markers, numStyles)
{
return {
text: markers.length,
index: numStyles
};
}
});
}
function callbackGeocode(testo, Rg, col)
{
return function(results, status)
{
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: Rg,
icon: col
});
var infowindow = new google.maps.InfoWindow();
bindInfoW(marker, testo, infowindow);
marker_list.push(marker);
};
}
function bindInfoW(marker, contentString, infowindow)
{
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close(map,marker);
});
}
</script>
</head>
<body onload="initialize()"></body>
</html>
Rispondi quotando