Ecco come utilizzi l'API di Google Maps screencast

Quindi il tuo cliente ti invia un'email e chiede: "Puoi inserire una di quelle mappe appariscenti nella mia pagina di contatto in modo che gli utenti possano effettivamente vedere il nostro edificio dalla vista di un satellite?". Hai utilizzato Google Maps più volte, ma c'è un solo problema: non hai idea di come utilizzare l'API. Bene, tira fuori il cucchiaio e scavare!

* Fai clic sulla levetta a schermo intero.

Passaggio 1: Ottieni una chiave API unica

Se dovessi scaricare il codice sorgente fornito con questo articolo, scoprirai che non funziona sul tuo sito web. Il motivo è che Google richiede a tutti gli utenti di ottenere una "chiave API" univoca per ogni sito che implementa le mappe di Google.

Mai aver paura. È gratuito al 100% e richiede circa trenta secondi per registrarsi. Innanzitutto, visita la pagina di registrazione di Google e inserisci l'URL del tuo sito web. Non preoccuparti di aggiungere un percorso specifico. L'URL radice coprirà ogni pagina che fa parte di quel dominio. Accetta i termini e le condizioni e fai clic su "Genera API".

Questo è tutto! La pagina in cui sei stato reindirizzato contiene la tua chiave univoca e una pagina di esempio per fungere da corso accelerato. La tua chiave assomiglierà a qualcosa:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Troverai anche un percorso di script che avrà il seguente aspetto:

La tua sarà diversa dalla mia perché conterrà il tuo valore chiave specifico. Copia questo e incollalo nella parte principale del documento.

Potresti voler aggiungere il link alla documentazione dell'API. Indubbiamente ti stai riferendo mentre le tue abilità progrediscono.

Passaggio 2: impostazione del codice HTML

Per semplicità, creeremo un layout bare bone. Aggiungi il seguente all'interno dell'elemento body del tuo documento.

In una situazione reale, dovresti spostare lo stile su un file esterno (come ho fatto nel video). I valori di altezza e larghezza verranno utilizzati dall'API per determinare le dimensioni della mappa. Non preoccuparti, nulla verrà tagliato.

Passaggio 3: Javascript

Successivamente, aggiungi quanto segue al tuo file Javascript. Rivedi un po 'e poi continua.

 $ (function () // quando il documento è pronto per essere manipolato if (GBrowserIsCompatible ()) // se il browser è compatibile con la mappa var di Google Map = document.getElementById ("myMap"); // Ottieni div elemento var m = nuovo GMap2 (mappa); // nuova istanza della classe GMap2 e passaggio nella nostra posizione div. m.setCenter (new GLatLng (36.158887, -86.782056), 13); // passaggio in latitudine, longitudine e livello di zoom. else alert ("Il tuo browser non è degno."););

Per prendere questo codice riga per riga:

• Quando il documento è pronto per essere manipolato, esegui il codice all'interno. Si tratta di una sintassi jQuery, ma jQuery non è richiesto per lo meno. Potresti anche semplicemente aggiungere un attributo "onLoad ()" al tuo elemento body, anche se questo è disordinato.
• Se il browser a cui l'utente accede alla mappa non è compatibile con l'API, quindi mostra un avviso (vedi in basso). Altrimenti, esegui il codice all'interno.
• Crea una variabile chiamata "mappa" e digli di trovare il div che conterrà la mappa.
• Successivamente, crea una variabile chiamata "m" e rendila uguale a una nuova istanza della classe "GMap2". Tra parentesi, passa la variabile "map" che hai appena creato in precedenza
• Infine, imposta un punto centrale in modo che la mappa sappia cosa mostrare. Per fare questo, creiamo una nuova istanza della classe "GLatLng" e passiamo i valori di latitudine e longitudine. Puoi andare qui per prendere i valori appropriati. Nel mio caso, ho impostato le coordinate per la mia città natale. Dopo di ciò, puoi facoltativamente inserire un livello di zoom, che ho impostato sullo standard "13".

Questo codice da solo ti fornirà una mappa di base che potrebbe essere completamente adatta alle tue esigenze. Tuttavia, se desideri implementare anche le funzioni "zoom" e "modalità mappa", continua a leggere.

Step 4: rifinire la nostra mappa

Ci sono letteralmente dozzine di funzionalità che puoi aggiungere alla tua mappa. Ne esamineremo alcuni. Innanzitutto, implementeremo una barra di zoom che consentirà agli utenti di aumentare o ridurre lo zoom in modo incrementale.

 m.addControl (new GLargeMapControl ())

Qui, stiamo prendendo la nostra mappa e stiamo aggiungendo un nuovo controllo chiamato "GLargeMapControl".

Successivamente, aggiungiamo una funzionalità che consentirà agli utenti di scegliere la modalità mappa che desiderano: normale, vista satellitare o ibrida.

 var c = new GMapTypeControl (); // cambia modalità mappa m.addControl (c);

• Crea una variabile chiamata "c" e rendila uguale a una nuova istanza della classe "GMapTypeControl".
• Aggiungi un nuovo controllo e passa in "c".

Se aggiorni il tuo browser, vedrai che l'utente ha la possibilità di scegliere la sua modalità di visualizzazione. Ma cosa succede se si desidera impostare la modalità predefinita? In tali casi, useresti "setMapType".

 m.setMapType (G_SATELLITE_MAP);

Quando si definisce la modalità predefinita, si hanno tre scelte.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Hai finito!

Non era troppo difficile, vero? Ci sono alcuni nomi di classi specifici che dovrai memorizzare, o annotare per riferimenti futuri. Ma a parte questo, è straordinariamente semplice implementare una mappa così avanzata nei tuoi siti web.

Per voi designer di modelli, perché non implementarlo in uno dei temi che vendete su ThemeForest?

Alcuni giorni fa, abbiamo pubblicato un tutorial che mostra come combinare molte API, incluse le mappe di Google. Ma molti di voi non ne sapevano abbastanza per iniziare. Speriamo che questo possa aiutare. Dopo aver girato la testa intorno a questa API, perché non risparmiarti qualche mal di testa e arruolare l'aiuto di una classe PHP chiamata Phoogle? Penso che sia meglio imparare prima la strada giusta, ma ora che hai ... tagliato degli angoli! Ci vediamo la prossima settimana.

Risorsa aggiuntiva

• 

  Come creare un mashup combinando 3 API diverse

  Questo tutorial ti mostrerà come creare un mashup di tre diverse API, inclusa l'integrazione con Google Maps.

  Visita l'articolo

• Iscriviti al feed RSS e al feed video per ulteriori tuts e articoli di sviluppo web giornalieri.