Guida Google Maps API
Modo discussione Modo lineare
09-17-2007, 10:54 PM (Questo messaggio è stato modificato l'ultima volta il: 09-18-2007 05:55 PM da gokufg.)
Messaggio: #1
Guida Google Maps API
Ho tradotto (con l'aiuto dello staff, spero al meglio 07) il tutorial sulle API maps di Google presente su questo blog.

Eccolo

Prima di addentrarsi in questo complicato tutorial, si raccomanda di guardarde una Google Maps gia' sviluppata.

Dopo aver risposto su una discussione nel forum Godbit, l'utente ha creato questa breve guida sulle Google Maps API.

Dopo aver letto questo tutorial sarai capace di:

- Avere una propria mappa interattiva;
- Impostare un livello di zoom standard;
- Localizzare le tue coordinate geografiche;
- Centrare la tua mappa in queste coordinate;
- Porre un marcatore su queste coordinate;
- Avere un pop-up con form per ottenere e dare le istruzioni;
- Link utili.

Vedi un esempio esempio prima di iniziare.
Puoi anche vedere qui, c'e' la Google map Vance Auto Sales.


Nota Bene: Google ha aggiornato la propria API il 3 aprile 2006. L'autore della guida ha modificato questo codice prima di scrivere questo tutorial per l'utilizzo della nuova API, quindi tutte le caratteristiche della versione 2 dell'API dovrebbero essere disponibili se si vuole inserirle. Inoltre, Google non fornisce alcun tipo di algoritmo di routing nelle API, quindi, se un utente digita un indirizzo e chiede le indicazioni stradali per arrivarvi, si apre una nuova finestra di Google Maps (originale) con tali indicazioni.


Step 1 - Registra una key API
Prima di inserire una mappa sul tuo sito cerca di registrare una Google API key.

Per registrarti, dovrai inserire l'url del sito che sta usando questa key. La scelta migliore per tale URL e' la cartella principale del tuo sito, in questo modo potrai utilizzare la mappa anche in tutte le sue sottocartelle (piuttosto che l'indirizzo assoluto della pagina che usera' la mappa). Facendo in questo modo sara' possibile far girare su tutte le pagine del sito la mappa. Ad esempio inserisci http://www.mandladventures.com
Lascia la pagina contentente la key aperta, cosi tu puoi copiare ed incollare la key in piu' step.
Ricorda che se stai testando su un server localhost, quando upperai in un server online avrai bisogno di due separate key API.

Step 2 - individua le coordinate geografiche
Google attualmente non ha un "geocoding". Quindi bisogna usare un alternativo.
Geocoder.us e' quello consigliato.
Semplicemente inserisci l'indirizzo di cui cerchi le coordinate, e Geocoder.us ti restituisce la latitudine e la longitudine.
Geocoder.us peri' fornisce solo gli indirizzi degli Stati Uniti. Per cercare altri indirizzi cerca free geocoder su Google.

Step 3 - Creare un file XML
Questo file XML riportera' tutti i punti che marcherai nella mappa. Questo file prevede anche il testo che apparira' quando il marcatore e' selezionato. Nel nostro esempio creeremo solo un marcatore. Se vuoi piu' di un marcatore nella mappa basta aggiungerne nel codice XML qui sotto.

Codice:
<markers>  
  <marker lat="35.827818" lng="-86.072576" html="<b/>First Baptist Church</b/> <br /> 405 West Main Street,  <br /> Woodbury, TN 37190" label="FBC"/>  
</markers>

Sostituisci lat="35.827818" con la latitudine del tuo indirizzo
Sostituisci lng="-86.072576" con la longitudine del tuo indirizzo

Sostituisci "First Baptist Church" con il nome della tua citta'.
Cambia "405 West Main Street, <br /> Woodbury, TN 37190" con il tuo indirizzo.
Cambia il label="FBC" con quello che vuoi.

Salva il file con nome "map.xml" e uppalo nella stessa directory dove inserirai la pagina della mappa. Potresti inserirlo in un'altra directory, peri' poi dovresti cambiare tutti i riferimenti in "map.xml" allo step 7 del codice per farlo puntare alla tua directory.

Ricorda: il linguaggio XML richiede tutti caratteri "speciali" di HTML.
Si elenca una lista comune di caratteri "speciali".
Codice:
< = &lt ;
> = &gt ;
/ = &#47 ;
] = &#93 ;
[ = &#91 ;
" = &#34 ;
' = &#39 ;

Step 4 - Richiama l'API con la tua key

Inserisci il codice seguente nell'head della tua pagina web, ponendo la tua key API al posto di key=ABQIAAAAbTgUqmDVtw6KNosttYwutxR-kQiDMsqewHdPfI0JvuxAHQRqVhQsEF-filcfK_gQIlIUCIcFhtJH0Q"
Codice:
<script  src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbTgUqmDVtw6KNosttYwutxR-kQiDMsqewHdPfI0JvuxAHQRqVhQsEF-filcfK_gQIlIUCIcFhtJH0Q"  type="text/javascript"></script>

Step 5 - Aggiungi un evento onunload nel tag body

<body onunload="GUnload()">

Step 6 - Posiziona il div contenente la mappa
Codice:
<div id="map" style="width: 550px; height: 450px; border: 1px solid #000000;"></div>

<!Questo messaggio sara' visualizzato se JavaScript e' disabilitato dal browser dell'utente-->  
    <noscript><strong>JavaScript deve essere abitiliato affinche lei possa usare le API Maps di Google.</strong><br />
      Sembra che JavaScript e' disabilitato o non e' supportato dal suo browser. <br />  
      Per visualizzare la Google Maps, abiliti JavaScript cambiando le opzioni del browser, e riprovi.<br /><br />  
    </noscript>

Inserisci questo div dove vuoi che la mappa compaia
Cambia lo stile per adattarlo a quello del tuo sito.

Step 7 - Inserisci la parte finale di codice

Inserisci questo codice prima dei tag di chiusura </body> e </html> della pagina in cui hai inserito la mappa
Codice:
<script type="text/javascript">  
    //<![CDATA[  
  
    //the original code had a GMapSidebar to pick the markers from, I eliminated the GMapSidebar,  
    //but deleting the code that referenced the bar corrupted the rest of the code  
    //so just ignore references to GMapSidebar, unless you're really with JavaScript  
    if (GBrowserIsCompatible()) {  
      // this variable will collect the html which will eventually be placed in the GMapSidebar  
      var GMapSidebar_html = "";  
  
      // arrays to hold copies of the markers and html used by the GMapSidebar  
      // because the function closure trick doesnt work there  
      var gmarkers = [];  
      var htmls = [];  
      var i = 0;  
      // arrays to hold variants of the info window html with get direction forms open  
      var to_htmls = [];  
      var from_htmls = [];  
  
      // A function to create the marker and set up the event window  
      function createMarker(point,name,html) {  
        var marker = new GMarker(point);  
  
        // The info window version with the "to here" form open (The Directions Form part.)  
        to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +  
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank" rel="nofollow">' +  
           '<input type="text" size=40 maxlength=40 name="saddr" id="saddr" value="" /><br>' +  
           '<input value="Get Directions" TYPE="submit">' +  
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +  
                  // "(" + name + ")" +  
           '"/>';  
        // The info window version with the "to here" form open  
        from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +  
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank" rel="nofollow">' +  
           '<input type="text" size=40 maxlength=40 name="daddr" id="daddr" value="" /><br>' +  
           '<input value="Get Directions" type="SUBMIT">' +  
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +  
                  // "(" + name + ")" +  
           '"/>';  
        // The inactive version of the direction info  
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';  
  
        GEvent.addListener(marker, "click", function() {  
          marker.openInfoWindowHtml(html);  
        });  
        // save the info we need to use later for the GMapSidebar  
        gmarkers[i] = marker;  
        htmls[i] = html;  
        // add a line to the GMapSidebar html  
        GMapSidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';  
        i++;  
        return marker;  
      }  
  
      // This function picks up the click and opens the corresponding info window  
      function myclick(i) {  
        gmarkers[i].openInfoWindowHtml(htmls[i]);  
      }  
  
      // functions that open the directions forms  
      function tohere(i) {  
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);  
      }  
      function fromhere(i) {  
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);  
      }  
  
//*******************************************************************  
//Edit these options to CONFIGURE THE MAP  
      // create the map  
      var map = new GMap2(document.getElementById("map"));  
      //GLargeMapControl adds large zoom and pan controls on the left,  
      //you can change it by picking from two of the options described below  
      //there is a GSmallMapControl for a smaller pan/zoom control  
      //also there is GSmallZoomControl - a small zoom control (no panning controls)  
      map.addControl(new GLargeMapControl());  
  
      //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it  
      map.addControl(new GMapTypeControl());  
  
      //this adds a scale to the bottom left of the map, delete line if you don't want it  
      map.addControl(new GScaleControl());  
  
      //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);  
      //these Coordinates set the center of the map, they do not place the marker.  
      //that is done in the map.xml file. If you want a marker to be centered, type  
      //the same coordinates here that are used for that marker in the map.xml file  
      //0 is zoomed all the way out.  
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);  
//*******************************************************************  
  
      // Read the data from map.xml  
      var request = GXmlHttp.create();  
      request.open("GET", "map.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");  
            // create the marker  
            var marker = createMarker(point,label,html);  
            map.addOverlay(marker);  
          }  
          // put the assembled GMapSidebar_html contents into the GMapSidebar div  
          document.getElementById("GMapSidebar").innerHTML = GMapSidebar_html;  
        }  
      }  
      request.send(null);  
    }  
  
    else {  
      alert("Sorry, the Google Maps API is not compatible with this browser");  
    }  
  
    // This Javascript is based on code provided by the  
    // Blackpool Community Church Javascript Team  
    // http://www.commchurch.freeserve.co.uk/  
    // http://www.econym.demon.co.uk/googlemaps/  
    //slight modifications by Matt from http://www.mandladventures.com/  
  
    //]]>  
    </script>

Step 8 - Configura la mappa

Modifica il codice della sezione sottostante per configurare la mappa a tuo piacimento.
Codice:
//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
      //GLargeMapControl adds large zoom and pan controls on the left,
      //you can change it by picking to of the options described below
      //there is a GSmallMapControl for a smaller pan/zoom control
      //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

      //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

      //this adds a scale to the bottom left of the map, delete line if you don't want it
      map.addControl(new GScaleControl());

      //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
      //these Coordinates set the center of the map, they do not place the marker.
      //that is done in the map.xml file. If you want a marker to be centered, type
      //the same coordinates here that are used for that marker in the map.xml file
      //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************
Imposta un punto centrale della mappa, ed il livello di zoom.
Sostituisci 35.827818 con la tua latitudine
Sostituisci -86.072576 con la tua longitudine.
Sostituisci 12 con il tuo livello desiderato di zoom. 0 corrisponde alla piu' larga visuale disponibile( ovvero il territorio visibile e' il maggiore possibile).
Per cancellare un controllo rimuovi la riga di codice corrispondente.
Inoltre puoi cambiare i tipi di controllo usati sulla mappa.
Ad esempio, alcuni controlli possono essere piu' grandi o piu' piccoli: regolarli pui' essere utile se hai una mappa piccola. Nel codice sono inseriti come commenti i nomi dei controlli alternativi. Prova, ad esempio, a sostituire GLargeMapControl con GSmallMapControl.

Step 9 - Tutorial Completo

Goditi il risultato!

Scarica il Sorgente usato dalla versione originale del tutorial.

Per saperne di piu' vedi anche le seguenti risorse:

- Documentazione Google Maps API Versione 2;
- Good set of Tutorials;
- Google Maps API Group;
- Google Mapki!

Un ringraziemento speciale va a:

- Mike Williams per il tutorials sul quale sono basate i codici di sopra;
- Google per il rilascio delle API
Visita il sito web di questo utente Trova tutti i messaggi di questo utente

Guida Google Maps API
Mostra modalità stampabile
Invia questa discussione ad un amico
Sottoscrivi questa discussione
Vai al forum:

Orario: 08-31-2014, 12:12 PM

Contattaci - Webbando - Modalità archivio - RSS Syndication - Torna all'inizio della pagina