Vediamo di rendere un po più interessante il nostro sito con integrato Google Maps aggiungendo qualche funzione in più.
Molto spesso sulle mappe di google, come già illustrato in precedenza, si trovano i cosiddetti “marker” (piccole icone che indicano un edificio o una via o qualsiasi altra cosa sulla mappa)
Il modo più semplice di utilizzarli è sicuramente quello di richiamare quelli standard forniti da googlemap, ma qualcuno desidera probabilmente crearne una versione personalizzata.
Esistono principalmente due modi per farlo: uno caricandoli tramite un db e l’altro realizzando un file XML.
Qui di seguito vi spiegherò il secondo metodo cioè tramite lettura dell’XML

Ecco un esempio di XML che chiameremo prova.xml:

<markers>

  <marker>

    <point lng="19.936521649360656" lat="50.06055518329961" labels="XXXX"/>
    <info fullname="Casa Mia" url="http://" inidirizzo="via roma 7" telefono="12345678" />

  </marker>

</markers>

Il tag marker può essere ripetuto un’infinità di volte cioè tante quante saranno i marker che vorremmo aggiungere alla nostra mappa.
Adesso vediamo come leggere l’XML…
Queste tre funzioni javaScript andranno messe all’internno del body della pagina HTML:

<script type="text/javascript">

// il parametro di ingresso è il nome del file XML
function leggiXML(nomeXML){

	<!--L'XML viene letto diversamante a seconda del browser che utilizziamo-->

	if(document.implementation && document.implementation.createDocument){
	// *** Mozilla

		//apro il file xml
		myXMLHTTPRequest = new XMLHttpRequest();
		myXMLHTTPRequest.open("GET", nomeXML, false);
		myXMLHTTPRequest.send(null);
		//leggo il file XML
		var xmlDoc = myXMLHTTPRequest.responseXML;
		var points = xmlDoc.documentElement.getElementsByTagName("point");
		var info = xmlDoc.documentElement.getElementsByTagName("info");

    		//ciclo per ogni marker trovato
    		for (var i = 0; i < points.length; i++) {

      		var point = new GPoint(parseFloat(points[i].getAttribute("lng")) ,parseFloat(points[i].getAttribute("lat")));
 		var labels = points[i].getAttribute("labels");
		//creo il marker
		var marker = createMarker(point, info[i], labels);
		//aggiungo il marker sulla mappa
		map.addOverlay(marker);
    		}

	}else {
	// *** Explorer

		//apro il file xml
		var request = GXmlHttp.create();
		request.open("GET", nomeXML, true);
		request.onreadystatechange = function() {
	  	if (request.readyState == 4) {
	  	//leggo il file XML
	  	var xmlDoc = request.responseXML;
    		var points = xmlDoc.documentElement.getElementsByTagName("point");
		var info = xmlDoc.documentElement.getElementsByTagName("info");

		//ciclo per ogni marker trovato
    		for (var i = 0; i < points.length; i++) {
      			var point = new GPoint(parseFloat(points[i].getAttribute("lng")) ,parseFloat(points[i].getAttribute("lat")));
 			var labels = points[i].getAttribute("labels");
			//creo il marker
			var marker = createMarker(point, info[i], labels);
			//aggiungo il marker sulla mappa
			map.addOverlay(marker);
    		}

  	}

	}
	request.send(null);
	}
}//fine leggi XML

// questa funzione crea il marker
function createMarker(point,info, labels) {

        var marker = new GMarker(point);

        <!--Evento click del mouse (si apre la nuvoletta)-->
        GEvent.addListener(marker, "click", function() {
        var fullname= info.getAttribute("fullname");
        var telefono= info.getAttribute("telefono");
        var inidirizzo=info.getAttribute("indirizzo");
        var url=info.getAttribute("url");
        //creo stringa da visualizzare nella nuvoletta
        var testoHTML=fullname+"<br />"+telefono+"<br />"+inidirizzo+"<br /> "+url+"<br />";
        <!--questa istruzione serve per aggingere al marker la nuvoletta con il dettaglio...-->

        <!--quindi quando clicchiamo su di esso si aprirà la corrispondente nuvoletta.-->
        marker.openInfoWindowHtml(testoHTML);   });

      return marker;
}

function caricaMappa(){
	if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	//coordinate su cui centrare la mappa
	map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);
	<!--fate attenzione che se il vostro marker non ha coordinate molto vicine a quelle del centro della mappa-->
	//non lo vederete a meno di non avere un zoom molto basso
	leggiXML("prova.xml");
}}
// variabile globale tutte le funzioni devono vederla.
var map;
<!--appena carica la pagina esegue la funzione "caricaMappa()" che a sua volta chiamerà "leggiXML()" che caricherà tutti i marker-->
window.onload = caricaMappa;
</script>

Questo è tutto!!

Popularity: 44% [?]