Aggiungere Indicazioni stradali di Google Maps per il Tuo Sito

0
1458

Anche se ci sono tante app e servizi per arrivare da un punto a a Un punto B, in definitiva, re di mappe di Google Maps. Io la uso sul mio computer, tablet e 90% del tempo sul mio smartphone. Offre il meglio di dati, la maggior parte di navigazione e le opzioni di routing e funzioni interessanti come Street View e a piedi, in bicicletta e di transito di massa, info.

Ma cosa succede se è necessario utilizzare una mappa o indicazioni al di fuori di Google del sito? Si supponga di avere il vostro matrimonio proprio sito web o un blog personale e gli ospiti potranno visitare il tuo sito, digitare l’indirizzo che sarà venuta da e automaticamente ottenere indicazioni per raggiungere il luogo dell’evento!

Beh, ci sono un paio di modi si può andare a realizzare questo. Il modo più semplice è semplicemente incorporare la mappa sulla tua pagina web utilizzando il codice embed generati da Google Maps. Il secondo modo è un po ‘ più tecnico, ma più personalizzabile e dinamica. Citerò per entrambi i metodi riportati di seguito.

Incorporare La Mappa Di Google

Se solo si desidera visualizzare le indicazioni da una posizione a un’altra, la cosa più semplice da fare è quello di incorporare qualsiasi mappa la visualizzazione utilizzando il codice embed. In primo luogo, andare avanti e installazione di qualsiasi direzione che si desidera in Google Maps e quindi fare clic sull’icona dell’ingranaggio in basso a destra della pagina.

Fare clic su Condivisione o incorporare la mappa e quindi fare clic sul Incorporare la mappa scheda. Qui si può scegliere una dimensione per la mappa e poi copia il codice iframe e cadere su qualsiasi pagina web che ti piace.

L’unico aspetto negativo di questo metodo è che l’utente vede solo una mappa statica. Nel secondo metodo riportato di seguito, è possibile creare un form in cui l’utente può digitare un qualsiasi indirizzo di partenza e in grado di generare una mappa da che indirizzo di destinazione indirizzo di vostra scelta.

Creare Mappe Di Google Form

Per illustrare ciò che intendo con il secondo metodo, andare avanti e digitare un indirizzo nella casella sottostante per ottenere indicazioni stradali dalla posizione corrente a casa mia:

Inserisci il tuo indirizzo di partenza:

Freddo eh? Si può facilmente creare questo piccolo modulo su qualsiasi sito web, blog, o dovunque si può mettere un po ‘ di codice HTML! Questo è grande anche per i siti web di piccole imprese, come si può buttare su la tua pagina dei contatti e la gente può ottenere indicazioni stradali rapidamente, piuttosto che dover copiare il tuo indirizzo di aprire una nuova finestra, e quindi digitare il loro indirizzo di partenza.

Quindi, come possiamo andare sulla creazione di questo modificato ottieni indicazioni box? Beh, in primo luogo, abbiamo bisogno di ottenere la sintassi corretta per l’URL che Google utilizza per le indicazioni. Per fortuna, siamo in grado di capirlo da ottenere le indicazioni stradali tra i due luoghi e poi basta copiare l’URL dalla barra degli indirizzi. È anche possibile fare clic sulla piccola icona a forma di ingranaggio in basso a destra della pagina e scegliere di Condividere o incorporare una mappa.

Il link di Condivisione scheda contiene l’URL, che è la stessa URL nella barra degli indirizzi del browser. Io ‘ve andato avanti e incollato l’URL completo sotto per mostrare a che cosa assomiglia.

https://www.google.com/maps/dir/3600+Thorp+Molle+Dr+Milano,+TX+75025,+USA/ 854+Deerfield+Rd+Allen+TX+75013,+USA/@33.1125686,-96.7557749,13 z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

Yikes! Che abbastanza a lungo! C’è un sacco di roba lì, la maggior parte dei quali non ha alcun senso! URL di Google Maps parametri utilizzati per essere molto semplice e facile, ma la nuova struttura degli URL è abbastanza complicato. Per fortuna, è ancora possibile utilizzare i vecchi parametri e Google li converte in la nuova versione automaticamente. Per capire cosa intendo, guarda il link qui sotto.

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

Andare avanti e dare un colpo. Mettere in un discorso tra virgolette, per l’inizio e fine dell’indirizzo e incolla questo URL nel tuo browser! Ho sostituito iniziare con la mia città, New Orleans e fine con Houston, TX, quindi questo è ciò che la mia Google Maps indicazioni stradali URL simile a:

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

Funziona! Come si può vedere, però, Google Maps converte i link in qualcosa di molto più complicato, una volta che la mappa viene caricata completamente. Ok, ora che abbiamo un sano URL che possiamo passare a Google Maps, abbiamo bisogno di creare un semplice form con due campi, uno per l’indirizzo di partenza e uno per l’indirizzo di destinazione.

Se vuoi che la gente basta digitare il proprio indirizzo e ottenere indicazioni stradali per raggiungere il tuo posto, quindi ci vuole il secondo campo per essere nascosto e già impostato per l’indirizzo di destinazione.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Inserisci il tuo indirizzo di partenza:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”indicazioni stradali” />
</form>

Controllare il codice di cui sopra. La prima riga inizia fuori forma, e dice che, quando invia pulsante, i dati devono essere inviati a maps.google.com/maps. La target=blank significa che si desidera che il risultato apre in una nuova finestra. Quindi abbiamo una casella di testo per l’indirizzo di partenza, che è vuota.

La seconda casella di testo nascosta e il valore è l’indirizzo di destinazione desiderato. Infine, c’è un pulsante di invio con il titolo “Indicazioni stradali”. Ora, quando qualcuno digita il loro indirizzo, possono ottenere questo:

È possibile personalizzare le indicazioni stradali e mappa ancora di più con un paio di parametri. Per esempio, diciamo che non si desidera la visualizzazione predefinita per essere le mappe, ma invece vuole essere Satellitari e mostra il Traffico.

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

Notare il layer=t e t=h campi nell’URL. layer=t è per il traffico di livello e t=h significa mappa ibrida! t può anche essere impostata su m per la mappa normale, k satellitare e p per i terreni. z è il livello di zoom e si può cambiare da 1 a 20. Nella sopra l’URL, è fissato a 7. È sufficiente aggiungere quelli per il tuo URL finale e adesso avete altamente personalizzati di Google Maps, Ottenere Indicazioni stradali modulo sul tuo sito!

Problemi con questo post un commento e cercherò di aiutarvi! Enjoy!