Embora existam tantos aplicativos e serviços^{(apps and services)} de mapeamento por aí para levá-lo do ponto A ao ponto B, o rei definitivo dos mapas é o Google Maps^{(Google Maps)} . Eu uso no meu computador, tablet e 90% do tempo no meu smartphone. Ele tem os melhores dados, mais opções de navegação e rotas e recursos interessantes, como Street View e informações a pé^{(Street View and walking)} , de bicicleta e de transporte público^{(biking and mass transit info)} .

Mas e se você precisar usar um mapa ou rotas^{(map or directions)} fora do site do Google? Suponha que^(Suppose) você tenha seu próprio site de casamento^{(wedding website)} ou um blog pessoal e os convidados^{(blog and guests)}  possam visitar seu site, digitar o endereço de onde virão e obter automaticamente direções para o local do evento^{(event location)} !

Bem, existem algumas maneiras de fazer isso. A maneira mais fácil é simplesmente incorporar o mapa em sua página da web usando o código de incorporação gerado pelo Google Maps . A segunda maneira é um pouco mais técnica, mas mais personalizável e dinâmica. Vou mencionar os dois métodos abaixo.

Incorporar mapa do Google

Se você deseja exibir apenas as direções de um local para outro, a coisa mais fácil a fazer é incorporar o mapa que estiver visualizando usando o código de incorporação. Primeiro^(First) , vá em frente e configure as direções desejadas no Google Maps e clique no ícone de engrenagem no canto inferior direito da página.

Clique em Compartilhar ou incorporar mapa^{( Share or embed map)} e, em seguida, clique na guia Incorporar mapa . ^{(Embed map)}Aqui você pode escolher um tamanho para o seu mapa e, em seguida, copiar o código iframe e soltá^{(iframe code and drop)} -lo em qualquer página da Web que desejar.

A única desvantagem desse método é que o usuário vê apenas um mapa estático. No segundo método abaixo, você pode criar um formulário no qual o usuário pode digitar qualquer endereço inicial e gerar um mapa desse endereço para um endereço de destino^{(destination address)} de sua escolha.

Criar formulário do Google Maps

Para ilustrar o que quero dizer com o segundo método, vá em frente e digite um endereço^{(US address)} nos EUA na caixa abaixo para obter direções do seu local para minha casa:

Legal hein^{(Cool huh)} ? Você pode facilmente criar este pequeno formulário em qualquer site, blog ou em qualquer lugar onde possa inserir algum código HTML^{(HTML code)} ! Isso também é ótimo para sites de pequenas empresas^{(business web)} , pois você pode exibi-lo em sua página de contato e as pessoas^{(contact page and people)} podem obter direções rapidamente, em vez de copiar seu endereço, abrir uma nova janela e digitar o endereço inicial^{(starting address)} .

Então, como vamos criar essa caixa de obtenção de direções modificada? Bem^(Well) , primeiro, precisamos obter a sintaxe correta para o URL que o Google^(Google) usa para rotas. Felizmente, podemos descobrir isso obtendo rotas entre dois lugares e copiando o URL da barra de endereço^{(address bar)} . Você também pode clicar no pequeno ícone de engrenagem no canto inferior direito da página e escolher Compartilhar ou incorporar mapa^{(Share or embed map)} .

A guia Compartilhar link^{(Share link)} conterá o URL , que é o mesmo URL da barra de endereços do navegador^{(browser address bar)} . Eu fui em frente e colei o URL inteiro abaixo^{(URL below)} apenas para mostrar como é.

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

Caramba! Isso é muito longo! Há um monte de coisas lá, a maioria das quais não faz nenhum sentido! Os parâmetros de URL do Google Maps^{(Google Maps URL)} costumavam ser muito simples e fáceis, mas a nova estrutura de URL^{(URL structure)} é bastante complicada. Felizmente, você ainda pode usar os parâmetros antigos e o Google^(Google) os converterá na nova versão automaticamente. Para ver o que quero dizer, confira o link abaixo.

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

Vá em frente e dê uma chance. Coloque um endereço entre aspas para o endereço inicial e final e cole^{(address and paste)} o URL no seu navegador! Substituí começar por minha cidade natal, ^{(home city)} Nova Orleans^{(New Orleans)} , e terminar por Houston , TX, então é assim que meu URL de rotas do Google Maps^{(Google Maps)} se parece:

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

Funciona! Como você pode ver, no entanto, o Google Maps^{(Google Maps)} converte os links em algo muito mais complicado quando o mapa é totalmente carregado. Ok, agora que temos um URL sensato que podemos passar para o Google Maps^{(Google Maps)} , precisamos criar um formulário simples com dois campos, um para o endereço inicial^{(starting address)} e outro para o endereço de destino^{(destination address)} .

Se você quiser que as pessoas apenas digitem o endereço e obtenham direções para o seu local, queremos que o segundo campo esteja oculto e já definido para o endereço de destino^{(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>

Confira o código acima. A primeira linha inicia o formulário e diz que quando o botão enviar^{(submit button)} é clicado, os dados devem ser enviados para maps.google.com/maps. O target=blank significa que queremos que o resultado abra em uma nova janela. Em seguida, temos uma caixa de texto^{(text box)} para o endereço inicial^{(starting address)} , que está em branco.

A segunda caixa de texto^{(text box)} está oculta e o valor é o endereço de destino^{(destination address)} que desejamos. Por fim, há um botão de envio com o título “Obter direções”. Agora, quando alguém digitar seu endereço, receberá isto:

Você pode personalizar as direções e mapear ainda mais com alguns parâmetros extras. Por exemplo, digamos que você não queira que a visualização padrão^{(default view)} seja mapas, mas que seja Satélite^(Satellite) e mostre Tráfego^(Traffic) .

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

Observe os campos layer=t e t=hURL . layer=t é para a traffic layer and t=h means mapa híbrido! t também pode ser definido como m para mapa normal, k para satélite  ep^(p) para terreno. z é o nível de zoom^{(zoom level)} e você pode alterá-lo de 1 para 20. No URL acima , ele está definido como 7. Basta^(Just) anexá-los ao seu URL final e agora você terá um formulário de rota do Google Maps^{(Google Maps Get Directions form)} altamente personalizado em seu site !

Se tiver algum problema com isso, poste um comentário e tentarei ajudar! Aproveitar!

Add Google Maps Driving Directions to Your Website

Evеn though therе are so many mapping apps and services оut therе to get you from point A to point Β, the definitive king of maps is Google Maps. I usе it on my computer, tablet and 90% of the time оn my smartphone. It’s got the best data, the most navіgation and routing options and cool features like Street View and walking, biking and 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

• O Google Maps não fala ou dá instruções de voz? 12 maneiras de corrigir

• 9 Hidden Recursos em Google Maps Você deve verificar

• Como ver o seu Google Maps Search History

• Como usar Stops múltiplo em Google Maps

• Como para Embed Google Forms no Your Website

• Como usar o rastreamento de incêndios florestais do Google Maps

• Como Backup Google Chrome History

• Como usar Google Sheets Drop Down Lists

• A 7 Best Gmail Add-Ons

• 8 usos incríveis para o Google Maps Street View

• Como usar o modo de navegação anônima do Google Maps em um dispositivo Android

• Como fazer um Business Card em Google Drive

• 8 Google Search Tips: Sempre encontre o que você é Looking para

• Como Export and Import Chrome Bookmarks

• Como Filter em folhas Google

• Qual é o Google App & How para usá-lo

• Você pode apagar todos os e-mails de Gmail de uma vez?

• O que é um erro Google “Traffic Unusual” e como corrigi-lo

• Qual é o Software Reporter Tool em Chrome and How para desativá-lo

• Como usar SUMIF em folhas Google