Google Maps è una delle migliori utility per raggiungere il web. È diventato il modo standard per le persone di ottenere indicazioni stradali online, visualizzare immagini satellitari e del terreno ed eseguire qualsiasi altra attività correlata alla mappa.
Ci sono una serie di motivi per cui vorresti incorporare una mappa di Google nella tua pagina web, che sia per scopi funzionali, come guidare gli utenti verso la tua posizione fisica o scopi estetici, come usare la mappa per un'immagine di sfondo. Oggi esamineremo due modi per affrontare questo compito: il modo semplice e veloce e il potente e flessibile percorso dell'API.
Incorporamento di una mappa di Google
La prima cosa che impareremo a fare è un semplice e diretto incorporamento di una mappa di Google. La funzionalità qui è abbastanza limitata ma è super facile.
La prima cosa che devi fare è semplicemente andare su Google Maps come faresti se cercassi indicazioni stradali. Basta digitare l'indirizzo in cui si desidera avviare la mappa.
Ora fai clic sull'icona piccolo collegamento nella parte superiore destra dello schermo. Dovrebbe apparire una piccola finestra che include un link puro e uno snippet HTML, copiare il secondo negli Appunti e incollarlo in un documento HTML.
L'HTML
Questo è tutto ciò che c'è da fare! Questo dovrebbe darti una mappa live sulla tua pagina web. Tuttavia, è probabile che tu non voglia mai incollare il codice ed essere fatto, ma invece lo stile per soddisfare le tue esigenze.
Per fare ciò, diamo un'occhiata al codice grezzo che risulta:
Ora, questo può sembrare un gran casino ma è abbastanza facile da ordinare. I link sono davvero il risultato di tutto quel codice dall'aspetto sgradevole, quindi buttiamoli fuori solo allo scopo dell'esempio. Ora il codice sembra molto più gestibile.
Qui possiamo vedere alcuni controlli di stile inline piuttosto semplici. Per cominciare, proviamo a ridimensionare la mappa a 600 px di larghezza. Possiamo facilmente avvolgerlo in un div e centrarlo. Ho anche cambiato il colore del link verso la fine del bianco.
Diciamo che volevamo divertirci un po 'di più. Abbandoniamo completamente l'ultimo collegamento e impostiamo la larghezza in modo che si estenda lungo tutta la pagina. Il codice per questo è bello e conciso.
Going Fullscreen: The Quick and Dirty Way
Il trucco di cui sopra è perfetto per incorporare una mappa live nella tua pagina di contatto, ma supponiamo di voler rendere la mappa più di una funzionalità di progettazione che di un'utilità. È abbastanza facile usare questa stessa tecnica e allungare la mappa su tutto lo schermo.
L'HTML
Per iniziare, crea due div, uno che conserverà qualsiasi opera d'arte, testo, ecc. E un altro per la mappa. Ho inserito un testo di base per la porzione di overlay e incollato la mia mappa nel secondo div. Notare che ho rimosso la parte di collegamento alla fine del collegamento embed e gli stili di dimensioni vicino all'inizio del collegamento.
Questo è davvero tutto il markup di cui abbiamo bisogno. Passiamo al nostro CSS per far sembrare tutto bello e farlo impilare bene.
Il CSS
La prima cosa che vorrai fare è scegliere come target l'iframe nel nostro div cart e impostarne l'altezza e la larghezza al 100%. Ciò garantirà che la nostra mappa si estenda su tutta la dimensione della finestra del browser.
Aggiornamento: Funziona in Safari ma risulta che far visualizzare a Firefox un div al 100% di altezza è più complicato di quanto pensassi. Dai un'occhiata a questo articolo per i dettagli.
Quindi, modifichiamo la sovrapposizione. La chiave qui è impostare il posizione proprietà a assoluto, che lo estrarrà dal normale flusso del documento e lo posizionerà in cima alla mappa. Da qui possiamo disegnare e spostare al suo posto.
Volevo una barra nera leggermente trasparente, quindi l'ho usata RGBA impostato su un'opacità del 90%. Da qui ho aggiunto un margine in alto e ho impostato i caratteri per entrambi i tag di testo usando la stenografia CSS.
Diventa creativo
Puoi trattare la mappa come qualsiasi altro elemento sulla pagina, quindi prova a modificarne la forma, applicando gli effetti e qualsiasi altra cosa tu possa inventare!
Le API di Google Maps
Abbiamo appena graffiato la superficie di ciò che puoi fare con Google Maps sul tuo sito. In realtà, Google ha un'intera famiglia di API volte ad aiutarti a strutturare, ad applicare lo stile e ad incorporare versioni altamente personalizzate delle loro mappe.
Il metodo iframe di cui sopra è divertente e semplice, ma la strada migliore da percorrere per incorporare le mappe nel tuo sito è probabilmente l'API JavaScript. Usando questo, tutto ciò che devi fare per incorporare una mappa è creare un div con un ID specifico in questo modo:
Poi salti nel tuo JavaScript, chiama una funzione, imposta alcune opzioni e le memorizza in una variabile, e crea la mappa usando l'ID dal codice HTML sopra.
L'API ti fornisce a tonnellata di opzioni per impostazioni come il livello di zoom e quali controlli sono visibili. Puoi anche personalizzare i piccoli indicatori di mappa con le tue immagini.
Esercitazioni API
Se desideri iniziare con le API di Google Maps, ecco alcuni link che ti consigliamo di provare.
- Esercitazione ufficiale sull'API JavaScript di Google
- Wade Hammes: impostazione di una mappa di Google come sfondo del tuo sito web
Mappe statiche
Non vuoi una mappa interattiva? Controlla la documentazione per aggiungere una mappa statica.Molte delle caratteristiche sono le stesse, il risultato è semplicemente un'immagine non in movimento piuttosto che una mappa reale con cui gli utenti possono giocare.
Conclusione
Per riassumere, se vuoi una mappa di Google sul tuo sito senza alcuno sforzo, segui i passaggi sopra per andare al percorso iframe. Il tuo controllo sulla mappa è limitato ma puoi divertirti molto con il modo in cui lo hai inserito nella pagina. Se hai bisogno di più funzionalità e flessibilità, registrati per una chiave API gratuita e vai sulla rotta JavaScript.
Lascia un commento qui sotto e mostraci eventuali pagine che hai creato con Google Maps. Quali tecniche e risorse hai trovato utili?