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: 24% [?]

Una volta integrata Google Maps ad una pagina web come descritto nel post precedente “Come aggiungere Google Maps ad una pagina Web”, possiamo personalizzarla a nostro piacimento, aggiungendo tutti i servizi che ci interessano. Per esempio, se volessimo inserire dei marker alla nostra mappa, è sufficiente modificare la funzione load () vista precedenza aggiungendo alcune righe di comando:

function load()
    {
        if (GBrowserIsCompatible()) {

            // Come nel post precedente creiamo la mappa, la centriamo
            // e aggiungiamo dei controlli
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);

            // Funzione che crea il Marker a cui vengono passati il punto e la
            // descrizione
            function createMarker(point, description) {

                //  Crea il marker nel punto che viene passato
                var marker = new GMarker(point);

                //  Aggiunge al marker una finestra HTML in cui viene messa la
                //  descrizione
                GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(description);
            });

            return marker;
          }

      //    Aggiunge il Marker "Prova Via di prova 10100 Torino, Italia"
      //    alle coordinate latitudine 45.068150 e longitudine 7.688050
      map.addOverlay(createMarker(new GLatLng(45.068150,7.688050), "<b>Prova</b><br><br>Via di prova 10100 Torino, Italia"));

        }
    }

Per coloro che possiedono un minimo di conoscenze di pagine Web e desiderano ulteriormente personalizzare la propria mappa, è possibile aggiungere molte altre opzioni seguendo le indicazioni mostrate nella documentazione ufficiale di Google Map.

In pochissimo tempo, è possibile realizzare una mappa come questa.

Popularity: 34% [?]

Sempre più sovente sui siti internet, vengono utilizzate delle mappe geografiche e topografiche per fornire o integrare alcuni servizi, come per esempio la ricerca di hotel, ristoranti o luoghi di divertimento di una città, sulle proprie pagine Web. Esistono molti modi per fare questo, ma spesso per ottenere dei buoni risultati, è necessario possedere delle ottime conoscenze dei linguaggi di programmazione delle pagine Web.
In questo post, mostreremo invece un modo semplicissimo, che richiede solo un minimo di conoscenze dell’HTML, per incorporare l’ormai famoso servizio Google Maps (versione 2) ad una pagina web.
Il primo passo da effettuare è quello di ottenere una Key all’indirizzo http://maps.google.com/apis/maps/signup.html .

Per poterlo fare è necessario:

• Indicare la cartella del vostro sito (es: http://etech.top-ix.org/ )
• Indicare un’account di posta Gmail (che potete ottenere gratuitamente sul sito di Google)

Ora con poche righe di codice potrete integrare Google Maps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Aggiungere Google Maps ad una pagina web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Sostituendo "INSERISCI_LA_KEY" con la vostra KEY, lo sript importerà nella pagina tutto il codice Javascript necessario per gestire le mappe //-->
<script src="http://maps.google.com/maps?file=api&v=2&key=INSERISCI_LA_KEY" type="text/javascript"></script>

<script type="text/javascript">
    //<![CDATA[

    //   La funzione load() è quella che permette di caricare la mappa
    function load()
    {
        // verifiva la compatibilità del Browser
        if (GBrowserIsCompatible()) {

            //   Ottiene l'elemento della pagina chiamato "map" (il DIV)
            //   e crea la mappa utilizzandolo come contenitore.
            var map = new GMap2(document.getElementById("map"));

            //   Aggiunge una barra di controllo (di tipo Large) per lo zoom e lo
            //   spostamento
            map.addControl(new GLargeMapControl());

            //   Aggiunge una barra di controllo che permette tre tipi di
            //   visualizzazione: mappa, setellite e ibrida
            map.addControl(new GMapTypeControl());

            //   Centra la mappa su Torino alle coordinate di latitudine 45.068150 e
            //   longitudine 7.688050, con uno zoom di 10 e visualizzazione ibrida
            map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);
        }
    }
    //]]>
</script>

</head>

<body onload="load();" onunload="GUnload()">

<div id="map" style="width: 600px; height: 450px; top: 20px; left: 300px;">Il tuo Browser non supporta Google Maps o non è attivato Javascript</div>

</body>
</html>

Nell’esempio mostrato, sono illustrate e descritte passo-passo tutte le principali funzioni utilizzate. In particolare ricordiamo che è necessario sostituire la propria KEY al posto di “INSERIRE_LA_KEY” e se si vuole cambiare la centratura della mappa è sufficiente indicare le coordinate geografiche (latitudine e longitudine), espresse in gradi (normalmente vengono rappresentate in °,’,’’ dove i ‘ e ‘’ devono essere portati in centesimi), reperibili facilmente su internet o con Google Earth .

Popularity: 35% [?]