Il nostro obiettivo è di rendere dinamica la visualizzazione dei markers importandone le coordinate ed altre informazioni da un file esterno alla nostra pagina di visualizzazione della Google Map.
In particolare, i dati che andremo a visualizzare sono stati precedentemente inclusi in un file XML. Non è il luogo adatto per disquisire sull'utilizzo di questo metalinguaggio, ci basti sapere che in un file xml le informazioni sono contenute in particolari elementi detti tags.
Nel nostro esempio il file xml è costituito da un solo tag (marker) con tre attributi, la latitudine (lat), la longitudine (long) e una breve descrizione (descr). Il file si chiama scuole.xml ed è il seguente
<markers>
<marker lat="44.111508" long="9.835831" descriz="Qui ho frequentato le scuole superiori">
<marker lat="44.113902" long="9.834570" descriz="Qui ho frequentato le scuole elementari">
<marker lat="44.113715" long="9.833441" descriz="Qui ho frequentato le scuole medie">
<marker lat="44.111206" long="9.834749" descriz="Qui abitavo molti anni fa">
</markers>
Il vantaggio di questa soluzione diventa evidente nel momento in cui avessimo l'esigenza di aggiungere altri markers. In quel caso, basterebbe inserire i nuovi dati a partire dalla penultima riga, rispettando la medesima sintassi, senza necessità di modificare la pagina web di visualizzazione della mappa.
Per gestire il file XML e "passare" i dati alla nostra pagina web sono però necessari alcuni step:
1. Caricare in memoria il contenuto del file
Per fare ciò, utilizzeremo il metodo
Il file scuole.xml viene caricato nella variabile data; in responseCode viene caricato con un codice di elaborazione il cui valore ci permette di capire se ci sono stati problemi nel caricamento (es. un file xml non valido o con errori nei dati) e quindi di gestire la cosa senza che l'elaborazione si interrompa (argomento che tralasciamo per ora per semplicità).
N.B. E' necessario che il documento XML sia contenuto nel medesimo server che ospita il codice javascript e quindi la pagina che richiede la Google Map.
2. Capire il tipo di documento contenuto nel file (XML)
Affinchè il codice javascript "capisca" che il file caricato sia xml viene utilizzato il namespace GXml, che fornisce metodi statici per gestire documenti XML. Il metodo
3. Gestire i dati in maniera corretta
I dati vengono caricati sotto forma di stringa mentre le coordinate geografiche devono essere in formato numerico. La funzione
Dopo tanto scrivere, passiamo alla visualizzazione del codice, opportunamente commentato per facilitarne la comprensione.
"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>Visualizzazione markers da file XML</title>
<script src="http://maps.google.com/maps?file=api&v=2 &key=LAVOSTRAGOOGLEAPIKEY" type="text/javascript">
</script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//Aggiunge la scala
map.addControl(new GScaleControl());
//Centra la mappa in un punto particolare
map.setCenter(new GLatLng(44.112909 , 9.835415), 16);
GDownloadUrl("scuole.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var punto = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("long")));
var titolo = (markers[i].getAttribute("descriz"));
map.addOverlay(new GMarker(punto, {title: titolo}));
}
});
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</body>
</html>
Il risultato lo potete apprezzare qui.
Una volta capito questo meccanismo, nei prossimi post tenteremo di realizzare una applicazione ancora più raffinata. Invece di movimentare un file XML statico, potremmo infatti crearlo in maniera dinamica, prelevando ad esempio l'elenco delle coordinate e le descrizioni da un database.
Post
Ottimo, proprio quello che mi serviva,
RispondiEliminacontinua così,
Nicola
Grazie Nicola per avere visitato il mio blog, ovviamente ho dato una occhiata al tuo sito ed è davvero fantastico! Complimenti. Ti segnalo un altro blog, http://mashing-up.blogspot.com/ , tenuto da un amico con il quale condividiamo lo stesso progetto, parlare (in italiano) delle API, io con un taglio più divulgativo, lui con un taglio più avanzato. Adesso si sta occupando di API Flickr, magari ti può interessare. Ciao e spero a presto
RispondiEliminaCiao, bel lavoro.
RispondiEliminaOra vorrei fare un passo avanti e selezionare i dati del db da rappresentare sulla mappa con i markers a partire da una pagina con menu a tendina.
In pratica vorrei passare al file creaxml.php un parametro dal menu a tendina e far rappresentare il risultato della query.
Ma non ci riesco.........
Ciao, complimenti per il lavoro!!!! utilissimo!!!
RispondiEliminasenti, sarebbe possibile cambiare tipo di marker (con una png personalizzata) solo ad un attributo e lasciare agli altri il solito marker di google?
grazie per la risposta