Anche se ci sono così tante app e servizi^{(apps and services)} di mappatura là fuori per portarti dal punto A al punto B, il re definitivo delle mappe è Google Maps . Lo uso sul mio computer, tablet e il 90% delle volte sul mio smartphone. Offre i dati migliori, il maggior numero di opzioni di navigazione e di percorso e funzioni interessanti come Street View e informazioni su percorsi a piedi^{(Street View and walking)} , in bicicletta e sui trasporti pubblici^{(biking and mass transit info)} .

Ma cosa succede se devi utilizzare una mappa o indicazioni^{(map or directions)} stradali al di fuori del sito Web di Google? Supponiamo^(Suppose) che tu abbia il tuo sito Web per il matrimonio^{(wedding website)} o un blog personale e che gli ospiti^{(blog and guests)}  possano visitare il tuo sito, digitare l'indirizzo da cui proverranno e ottenere automaticamente le indicazioni stradali per la location dell'evento^{(event location)} !

Bene, ci sono un paio di modi in cui puoi farlo. Il modo più semplice è incorporare semplicemente la mappa nella 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 desideri visualizzare solo le indicazioni stradali da una posizione all'altra, la cosa più semplice da fare è incorporare la mappa che stai visualizzando utilizzando il codice di incorporamento. Innanzitutto^(First) , vai avanti e imposta le indicazioni che desideri in Google Maps , quindi fai clic sull'icona a forma di ingranaggio in basso a destra della pagina.

Fare clic su Condividi o incorpora mappa^{( Share or embed map)} , quindi fare clic sulla scheda Incorpora mappa . ^{(Embed map)}Qui puoi scegliere una dimensione per la tua mappa, quindi copiare il codice iframe e rilasciarlo^{(iframe code and drop)} 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 di seguito, puoi creare un modulo in cui l'utente può digitare qualsiasi indirizzo di partenza e genererà una mappa da quell'indirizzo a un indirizzo di destinazione^{(destination address)} a tua scelta.

Crea modulo Google Maps

Per illustrare cosa intendo con il secondo metodo, vai avanti e digita un indirizzo statunitense^{(US address)} nella casella sottostante per ottenere indicazioni stradali dalla tua posizione a casa mia:

Bello eh^{(Cool huh)} ? Puoi facilmente creare questo piccolo modulo su qualsiasi sito Web, blog o ovunque tu possa inserire del codice HTML^{(HTML code)} ! Questo è ottimo anche per i siti Web di piccole imprese^{(business web)} in quanto puoi pubblicarlo nella pagina dei contatti e le persone^{(contact page and people)} possono ottenere indicazioni stradali rapidamente, anziché dover copiare il tuo indirizzo, aprire una nuova finestra e quindi digitare il proprio indirizzo di partenza^{(starting address)} .

Quindi, come possiamo creare questa casella modificata per ottenere indicazioni stradali? Per^(Well) prima cosa, dovremo ottenere la sintassi corretta per l' URL utilizzato da Google per le indicazioni stradali. Fortunatamente, possiamo capirlo ottenendo indicazioni stradali tra due luoghi e quindi semplicemente copiando l' URL dalla barra degli indirizzi^{(address bar)} . Puoi anche fare clic sulla piccola icona a forma di ingranaggio in basso a destra nella pagina e scegliere Condividi o incorpora mappa^{(Share or embed map)} .

La scheda Condividi collegamento^{(Share link)} conterrà l' URL , che è lo stesso URL nella barra degli indirizzi del browser^{(browser address bar)} . Sono andato avanti e ho incollato l'intero URL qui sotto^{(URL below)} solo per mostrarti come appare.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ 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

Accidenti! È piuttosto lungo! Ci sono un sacco di cose lì dentro, la maggior parte delle quali non ha alcun senso! I parametri URL di Google Maps^{(Google Maps URL)} in passato erano molto semplici e semplici, ma la nuova struttura dell'URL^{(URL structure)} è piuttosto complicata. Per fortuna, puoi ancora utilizzare i vecchi parametri e Google li convertirà automaticamente nella nuova versione. Per capire cosa intendo, controlla il link qui sotto.

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

Vai avanti e provaci. Inserisci un indirizzo tra virgolette per l' indirizzo iniziale e finale e incolla^{(address and paste)} l' URL nel tuo browser! Ho sostituito l'inizio con la mia città natale ^{(home city)} New Orleans e la fine con Houston , TX, quindi ecco come appare l' URL delle mie indicazioni stradali di Google Maps :

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

Funziona! Come puoi vedere, tuttavia, Google Maps converte i collegamenti in qualcosa di molto più complicato una volta caricata completamente la mappa. Ok, quindi ora che abbiamo un URL sano che possiamo passare a Google Maps , dobbiamo creare un semplice modulo con due campi, uno per l' indirizzo di partenza^{(starting address)} e uno per l' indirizzo di destinazione^{(destination address)} .

Se desideri che le persone digitino semplicemente il loro indirizzo e ottengano indicazioni stradali per raggiungere la tua casa, vorremo che il secondo campo sia nascosto e già impostato sull'indirizzo di destinazione^{(destination address)} .

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

Controlla il codice sopra. La prima riga inizia con il modulo e dice che quando si fa clic sul pulsante di invio^{(submit button)} , i dati devono essere inviati a maps.google.com/maps. Il target=blank significa che vogliamo che il risultato si apra in una nuova finestra. Quindi abbiamo una casella di testo^{(text box)} per l' indirizzo iniziale^{(starting address)} , che è vuota.

La seconda casella di testo^{(text box)} è nascosta e il valore è l' indirizzo di destinazione^{(destination address)} che desideriamo. Infine, c'è un pulsante di invio con il titolo "Ottieni indicazioni stradali". Ora, quando qualcuno digita il proprio indirizzo, riceverà questo:

Puoi personalizzare ancora di più le indicazioni stradali e la mappa con alcuni parametri extra. Ad esempio, supponiamo che tu non desideri che la visualizzazione predefinita^{(default view)} sia mappe, ma desideri invece che sia Satellite e mostri Traffico^(Traffic) .

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=t e t=hnell'URL^(URL) . layer=t è per il traffic layer and t=h means mappa ibrida! t può anche essere impostato su m per la mappa normale, k per il satellite e  p per il terreno. z è il livello di zoom^{(zoom level)} e puoi cambiarlo da 1 a 20. Nell'URL^(URL) sopra , è impostato su 7. Basta^(Just) aggiungere quelli all'URL^(URL) finale e ora hai un modulo Ottieni indicazioni stradali di Google Maps^{(Google Maps Get Directions form)} altamente personalizzato sul tuo sito !

Se hai problemi con questo, pubblica un commento e cercherò di aiutarti! Divertiti!

Add Google Maps Driving Directions to Your Website

Even though therе are so many mapping apps аnd services out therе to get you from point A to point B, the definitive king of maps is Google Maps. I use it on my computer, tаblet and 90% of the time on my smartphone. It’s got the best data, the most navigation and routing options and cool features like Street View and walking, biking аnd mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ 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! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

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

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

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

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

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

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Google Maps non parla o non fornisce indicazioni vocali? 12 modi per risolvere

• 9 Hidden Caratteristiche in Google Maps Dovresti controllare

• Come visualizzare il tuo Google Maps Search History

• Come utilizzare più Stops in Google Maps

• Come Embed Google Forms su Your Website

• Come fare uno Google Form: A Complete Guide

• Google Search Bar Widget Missing? Come ripristinarlo su Android

• Come inviare Private Emails in Gmail

• Come utilizzare SUMIF in fogli Google

• Come visualizzare la cronologia delle posizioni di Google Maps

• Qual è la Google App & How di usarlo

• Come girare Google SafeSearch Off

• Come rilasciare un Pin in Google Maps su desktop e dispositivi mobili

• Come utilizzare gli elenchi Google Sheets Drop Down

• Come incorporare Google Calendar sul tuo sito web

• È possibile cancellare tutte le email da Gmail in una volta?

• Come utilizzare Google Task - Guida introduttiva

• Aggiungi e risolvi commenti in Google Docs

• Qual è lo Software Reporter Tool in Chrome and How per disabilitarlo

• Come eliminare YouTube History and Search Activity