Aggiungi Google Indicazioni stradali al tuo sito web


Anche se ci sono così tante app e servizi di mappatura là fuori che ti portano dal punto A al punto B, il re definitivo delle mappe è Google Maps. Lo uso sul mio computer, tablet e il 90% del tempo sul mio smartphone. Offre i migliori dati, la maggior parte delle opzioni di navigazione e routing e funzioni interessanti come Street View e informazioni su camminare, andare in bicicletta e per il trasporto di massa.

Ma se è necessario utilizzare una mappa o indicazioni stradali al di fuori del sito web di Google? Supponiamo che tu abbia il tuo sito web per matrimoni o un blog personale e gli ospiti possano visitare il tuo sito, digitare l'indirizzo da cui verranno e ottenere automaticamente le indicazioni per raggiungere la sede dell'evento!

Bene, ci sono un paio di modi in cui puoi fare per realizzare questo. Il modo più semplice è semplicemente incorporare la mappa sulla tua pagina web utilizzando il codice di incorporamento generato da Google Maps. Il secondo modo è un po 'più tecnico, ma più personalizzabile e dinamico. Menzionerò entrambi i metodi di seguito.

Incorpora Google Map

Se vuoi solo visualizzare le indicazioni stradali da una posizione a un'altra, la cosa più semplice da fare è incorporare qualunque mappa tu sia visualizzazione utilizzando il codice di incorporamento. Innanzitutto, vai avanti e imposta le indicazioni desiderate in Google Maps, quindi fai clic sull'icona a forma di ingranaggio nella parte inferiore destra della pagina.

share or embed map

Fai clic su Condividi o incorpora mappa, quindi fai clic sulla scheda Incorpora mappa. Qui puoi scegliere una dimensione per la tua mappa e quindi copiare il codice iframe e rilasciarlo su qualsiasi pagina web che ti piace.

embed map

L'unico svantaggio di questo metodo è che l'utente vede solo una mappa statica. Nel secondo metodo riportato di seguito, puoi creare un modulo in cui l'utente può digitare qualsiasi indirizzo iniziale e genererà una mappa da tale indirizzo a un indirizzo di destinazione di tua scelta.

Crea modulo di Google Maps

Per illustrare cosa intendo con il secondo metodo, procedi e digita un indirizzo USA nella casella sottostante per ottenere indicazioni stradali dalla tua posizione a casa mia:

Inserisci il tuo indirizzo di partenza:

Cool huh? Puoi creare facilmente questo piccolo modulo su qualsiasi sito web, blog o ovunque tu possa inserire un codice HTML! Questo è ottimo anche per i siti Web di piccole imprese in quanto puoi pubblicarlo nella tua pagina di contatto e le persone possono ottenere rapidamente indicazioni stradali, piuttosto che dover copiare il tuo indirizzo, aprire una nuova finestra e digitare il loro indirizzo iniziale.

Quindi, come procediamo con la creazione di questa finestra di indicazioni stradali modificata? Innanzitutto, dovremo ottenere la sintassi corretta per l'URL che Google utilizza per le indicazioni stradali. Fortunatamente, possiamo capirlo ottenendo indicazioni stradali tra due luoghi e poi semplicemente copiando l'URL dalla barra degli indirizzi. Puoi anche fare clic sull'icona a forma di ingranaggio nell'angolo in basso a destra della pagina e selezionare Condividi o incorporare la mappa.

share or embed map

La scheda del link Condividi conterrà l'URL, che è lo stesso URL nella barra degli indirizzi del browser. Ho seguito e incollato l'intero URL qui sotto per mostrarti come appare.

share link maps

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025 !, + Stati Uniti / 854 + Deerfield + Rd, + Allen, + TX + 75013, + Stati Uniti / @ 33,1,125686 millions, -96.7557749,13z / data = 3M1 4b1 4m13 4m12 1M5 1M1 1s0x864c3d45018517a5:!!!!!! 0xbabd3c91a1321997 2m2!! 1d-96,762,484 mila! 2d33.08947! 1M5! 1M1! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f 2m2 1d-96,666,151 mila 2d33.133892

Yikes!!! È piuttosto lungo! Ci sono molte cose lì dentro, la maggior parte delle quali non ha senso! I parametri dell'URL di Google Maps erano molto semplici e intuitivi, ma la nuova struttura dell'URL è piuttosto complicata. Per fortuna, puoi ancora utilizzare i vecchi parametri e Google li convertirà automaticamente nella nuova versione. Per capire cosa intendo, check out il link qui sotto.

http://maps.google.com/maps?saddr=start&daddr=end

Vai avanti e dagli un colpo. Inserisci un indirizzo tra virgolette per l'indirizzo iniziale e finale e incolla l'URL nel tuo browser! Ho sostituito iniziare con la mia casa di New Orleans e alla fine con Houston, TX, quindi questo è ciò che il mio URL di Google Maps direzioni appare come:

http://maps.google.com/maps?saddr="new orleans, la "& amp; daddr =" houston, tx "

Funziona! Come puoi vedere, Google Maps converte i link in qualcosa di molto più complicato una volta caricata completamente la mappa. Ok, ora che abbiamo un buon URL che possiamo passare su Google Maps, dobbiamo creare un semplice modulo con due campi, uno per l'indirizzo di partenza e uno per l'indirizzo di destinazione.

Se vuoi che le persone digitino semplicemente il loro indirizzo e ricevano indicazioni stradali per raggiungere la tua posizione, quindi vorremmo che il secondo campo fosse nascosto e già impostato sull'indirizzo di destinazione.

& lt; form action = " http://maps.google.com/maps "method =" get "target =" _ blank "& gt;
Inserisci il tuo indirizzo di partenza:
& lt; input type =" text "name =" saddr "/ & gt ;
& lt; ingresso type = nome = valore”nascosto””DADDR” =”854 Deerfield Rd, Allen, TX” / & gt;
& lt; ingresso type =”submit” value =”ottenere indicazioni” / & gt ;
& lt; / form & gt;

Controlla il codice sopra. La prima riga inizia form e dice che quando si fa clic sul pulsante di invio, i dati devono essere inviati a maps.google.com/maps. target = blanksignifica che vogliamo che il risultato si apra in una nuova finestra. Poi abbiamo una casella di testo per l'indirizzo di partenza, che è vuoto.

La seconda casella di testo è nascosta e il valore è l'indirizzo di destinazione che desideriamo. Infine, c'è un pulsante di invio con il titolo "Ottieni indicazioni stradali". Ora quando qualcuno digita il suo indirizzo, otterrà questo:

maps directions

Puoi personalizzare le direzioni e mappare ancora di più con alcuni parametri aggiuntivi . Per esempio, diciamo che non si desidera che la visualizzazione predefinita per essere mappe, ma invece vuole che sia Satellitee spettacolo Traffico.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Nota i campi layer = te t = hnell'URL. layer = t è per il livello di traffico e t = h significa mappa ibrida! tpuò anche essere impostato su mper la mappa normale, kper il satellite e pper il terreno. zè il livello di zoom e puoi cambiarlo da 1 a 20. Nell'URL sopra riportato, è impostato su 7. Basta aggiungere quelli all'URL finale e ora hai un Google altamente personalizzato Mappe Ottieni il modulo Indicazioni stradali sul tuo sito!

Hai qualche problema con questo, pubblica un commento e cercherò di aiutarti! Buon divertimento!

Google Maps: come scaricare le mappe e utilizzarle offline

Related posts:


31.12.2014