As mentioned in previous posts, we begin to "refine" the procedure for viewing on our map of specific markers .
Our goal is to make dynamic display of markers by importing the coordinates and other information from an external file to our website to view the Google Map.
In particular, we're going to see the data were previously included in an XML file . It is not the place to quibble about this 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 But some steps are necessary: \u200b\u200b
1. Load in memory the contents of the file
To do this, we use the method
file is loaded into the variable scuole.xml date; in responseCode is loaded with a code of computing the value of which allows us to see if there were no problems in loading (eg an invalid xml file or data errors) and then handle it without the 'processing stops (a topic that we leave out for now for simplicity).
NB E 'must 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}));
}});}
} \u0026lt;/ script>
\u0026lt;/ head>
\u0026lt;body onload="initialize()" onunload="GUnload()">
\u0026lt; div id = "map_canvas" style = "width: 500px; height: 400px"> \u0026lt;/ div>
\u0026lt;/ body>
\u0026lt;/ html>
The result can appreciate here.
Once you understand this mechanism, the next post we will try to make an application even more refined. Instead of moving a static XML file, we may in fact create a dynamic, taking for example the list of coordinates and descriptions from a database.
0 comments:
Post a Comment