Area sviluppo Tesene

Proseguiamo questa rubrica di Tutorial aggiungendo alla nostra mappa, i dati presi da un file XML e la possibilità di selezionare i markers su dei collegamenti sulla pagina HTML.

Per quanto riguarda la lettura dei dati da un file XML, questa non è una caratteristica propria di Google Maps e si potrebbe utilizzare qualsiasi metodo per leggere il file, però in questo caso, ci troveremmo a dover gestire le incompatibilità tra i browsers.

Fortunatamente la Google Maps API ci viene incontro fornendoci gli oggetti GXmlHttp e i metodi per ricavare le informazioni Xml.

Notiamo anche che usando il metodo GXmlHttp, possiamo fare la richiesta al server in modo asincrono, nonché controllare che il file venga caricato senza errori.

Se nel file XML usiamo una sintassi tipo la seguente:

<markers>
<marker lat="x" lng="y" label="etichetta">
<infowindow>dfaafa</infowindow>
</marker>
</markers>

Il codice necessario è il seguente:

 

// Legge i dati da gmaps4.xml
var request = GXmlHttp.create();
request.open("GET", "gmaps4.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// crea i markers
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}
request.send(null);

 osserviamo anche che alla fine del parsing, tutti i dati vengono messi nell'elemento con id "side_bar".

 

Ma come ci va a finire l'HTML nella variabile side_bar_html ?

Semplicemente ci saremo ricordati di modificare la funzione createMarker, in modo che alla fine risulti così:

function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});

gmarkers[i] = marker;
htmls[i] = html;

side_bar_html += '<a xhref="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}

 ed avremo definito la funzione myclick() necessaria per aprire la infowindow anche cliccando sul collegamento come segue:

function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

 

Per vedere come funziona tutto insieme, consiglio di guardare il codice dell'esempio seguente. 

 

 

 

GMaps Demo XML e sidebar

 

 

Aumenta la diffusione di questo articolo

Questo articolo è stato pubblicato Lunedì, 4 Giugno 2007 alle 14:11 e classificato in Ajax, Javascript, Maps. Puoi seguire i commenti a questo articolo tramite il feed RSS 2.0. Puoi inviare un commento, o fare un trackback dal tuo sito.

View blog reactions