Ciao a tutti i gentili esperti che mi aiuteranno. Mi sono appena iscritto perché ho bisogno di alcune indicazioni. Sono ai primissimi passi con il javascript, sto tentando di studiarlo, per il momento non posso far altro che riadattare quello che già in parte è impostato.

Sono ad un punto fermo con una pagina del sito della azienda per cui lavoro, è una pagina che subirà modifiche nel futuro ma ho intenzione di inserire un modulo con una mappa interessante in modo che i clienti abbiano una buona impressione e che sappiano la nostra presenza sul territorio.

http://www.squassabia.com/aree_espositive_prova3.asp

Quindi non badate al layout; ho deciso di inserire un utile infobox da personalizzare ed un markercluster poiché nel livello di zoom predefinito alcuni negozi sono troppo vicini e compaiono con un rischioso marker unico (che in realtà sono due ma sono troppo vicini). Ora, il markercluster funziona ma non sono riuscito a modificarlo in modo da settarlo per la distanza tra i marker piuttosto che una griglia (che tra l'altro risulta immaginaria visto che cambia di misura al cambio di zoom).

L'Infobox inoltre non ne vuole sapere e le ho provate tutte, vi posto il codice javascript incluso nella pagina in questione, sperando di non rendere illeggibile tutto il post. Vorrei capire anche come collegare la lista che vedete a fianco con delle animazioni sui marker, ho trovato degli esempi ma la lista veniva creata in automatico dall'array dei marker.

Potreste darmi qualche indicazione in merito??vi ringrazio


// JavaScript Document

function initialize() {

//icone custom
var customIcons = {
negozio: {icon: '/images/gmaps/mc.png'},
outlet: {icon: '/images/gmaps/pin_fuc_outlet.png'},
sede: {icon: '/images/gmaps/pin_fuc_home.png'}
};

var clusterStyles = [
{
textColor: 'white',
url: '/images/gmaps/mc.png',
height: 48,
width: 48
}];

//creo una istanza della mappa
var map = new google.maps.Map(document.getElementById("mapp"), {
center: new google.maps.LatLng(45.328, 10.458),
zoom: 10,
mapTypeId: 'roadmap',
saturation: 20, //scrollwheel: false
});


//stile della mappa
var pinkroad = [ //creo un array di proprietà
{
featureType: "all", //seleziono la feature
stylers: [{gamma: 0.8 },{ lightness: 50 },{ saturation: -100}]
},
{
featureType: "road.highway.controlled_access",
stylers: [{ hue: "#FF3366" },{ saturation: 50 },{ lightness: -5 }]
}
];
map.setOptions({styles: pinkroad});


var cluster = [];

var boxText = document.createElement("div");
boxText.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt
British Columbia
Canada";

var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};


//creo il marker
downloadUrl("xml/negozi.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++)
{
var type = markers[i].getAttribute("tipo");
var name = markers[i].getElementsByTagName("nome")[0].childNodes[0].nodeValue;
var address = markers[i].getElementsByTagName("indirizzo")[0].childNodes[0].nodeValue;
var city = markers[i].getElementsByTagName("citta")[0].childNodes[0].nodeValue;
var phone = markers[i].getElementsByTagName("telefono")[0].childNodes[0].nodeValue;


var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));


var html = name + '
' + address + '
' + city + '
' + phone;
var icon = '/images/gmaps/pin_fuc.png';
var marker = new google.maps.Marker({map: map, position: point, icon :'/images/gmaps/pin_fuc.png'});

cluster.push(marker);

var ib = new InfoBox();
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions)
ib.open(map, marker);


});

}


var mcOptions = {gridSize: 50, maxZoom: 10, styles: clusterStyles};
var mc = new MarkerClusterer(map,cluster,mcOptions);


});


}



function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}