Agregue indicaciones de manejo de Google Maps a su sitio web

Aunque existen tantas aplicaciones y servicios^{(apps and services)} de mapas para llevarte del punto A al punto B, el rey definitivo de los mapas es Google Maps . Lo uso en mi computadora, tableta y el 90% del tiempo en mi teléfono inteligente. Tiene los mejores datos, la mayor cantidad de opciones de navegación y enrutamiento y características geniales como Street View e información para caminar^{(Street View and walking)} , andar en bicicleta y transporte público^{(biking and mass transit info)} .

Pero, ¿qué sucede si necesita usar un mapa o direcciones^{(map or directions)} fuera del sitio web de Google? ¡ Supongamos^(Suppose) que tiene su propio sitio web de bodas^{(wedding website)} o un blog personal y los invitados^{(blog and guests)} pueden visitar su sitio, escribir la dirección de la que vendrán y obtener automáticamente indicaciones para llegar al lugar del evento^{(event location)} !

Bueno, hay un par de formas en las que puedes lograr esto. La forma más fácil es simplemente insertar el mapa en su página web utilizando el código de inserción generado por Google Maps . La segunda forma es un poco más técnica, pero más personalizable y dinámica. Mencionaré ambos métodos a continuación.

Insertar mapa de Google

Si solo desea mostrar direcciones de una ubicación a otra, lo más fácil es insertar cualquier mapa que esté viendo usando el código de inserción. Primero^(First) , continúe y configure las direcciones que desee en Google Maps y luego haga clic en el ícono de ajustes en la parte inferior derecha de la página.

Haga clic en Compartir o incrustar mapa^{( Share or embed map)} y luego haga clic en la pestaña Incrustar mapa . ^{(Embed map)}Aquí puede elegir un tamaño para su mapa y luego copiar el código iframe y soltarlo^{(iframe code and drop)} en cualquier página web que desee.

El único inconveniente de este método es que el usuario solo ve un mapa estático. En el segundo método a continuación, puede crear un formulario mediante el cual el usuario puede escribir cualquier dirección de inicio y generará un mapa desde esa dirección hasta la dirección de destino^{(destination address)} de su elección.

Crear formulario de Google Maps

Para ilustrar lo que quiero decir con el segundo método, continúe y escriba una dirección de EE^{(US address)} . UU . en el cuadro a continuación para obtener direcciones desde su ubicación hasta mi casa:

Genial, ¿eh^{(Cool huh)} ? ¡Puede crear fácilmente este pequeño formulario en cualquier sitio web, blog o en cualquier lugar donde pueda poner algún código HTML^{(HTML code)} ! Esto también es excelente para los sitios web de pequeñas empresas^{(business web)} , ya que puede mostrarlo en su página de contacto y las personas^{(contact page and people)} pueden obtener direcciones rápidamente, en lugar de tener que copiar su dirección, abrir una nueva ventana y luego escribir su dirección inicial^{(starting address)} .

Entonces, ¿cómo hacemos para crear este cuadro modificado para obtener direcciones? Bueno^(Well) , primero, necesitaremos obtener la sintaxis correcta para la URL que Google usa para las direcciones. Afortunadamente, podemos averiguarlo obteniendo direcciones entre dos lugares y luego simplemente copiando la URL de la barra de direcciones^{(address bar)} . También puede hacer clic en el pequeño icono de engranaje en la parte inferior derecha de la página y elegir Compartir o incrustar mapa^{(Share or embed map)} .

La pestaña Compartir enlace^{(Share link)} contendrá la URL , que es la misma URL en la barra de direcciones de su navegador^{(browser address bar)} . Seguí adelante y pegué la URL completa a continuación^{(URL below)} solo para mostrarle cómo se ve.

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

¡Ay! ¡Eso es bastante largo! ¡Hay muchas cosas allí, la mayoría de las cuales no tienen ningún sentido! Los parámetros de URL de Google Maps^{(Google Maps URL)} solían ser muy sencillos y sencillos, pero la nueva estructura de URL^{(URL structure)} es bastante complicada. Afortunadamente, aún puede usar los parámetros antiguos y Google los convertirá a la nueva versión automáticamente. Para ver lo que quiero decir, echa un vistazo al siguiente enlace.

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

Adelante, pruébalo. ¡ Ingrese una dirección entre comillas para la dirección inicial y final y pegue^{(address and paste)} la URL en su navegador! Reemplacé el inicio con mi ciudad natal, ^{(home city)} Nueva Orleans^{(New Orleans)} , y el final con Houston , TX, así es como se ve mi URL de direcciones de Google Maps :

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

¡Funciona! Sin embargo, como puede ver, Google Maps convierte los enlaces en algo mucho más complicado una vez que el mapa se carga por completo. Bien, ahora que tenemos una URL sana que podemos pasar a Google Maps , necesitamos crear un formulario simple con dos campos, uno para la dirección de inicio^{(starting address)} y otro para la dirección de destino^{(destination address)} .

Si desea que las personas solo escriban su dirección y obtengan indicaciones para llegar a su lugar, entonces desearemos que el segundo campo esté oculto y ya configurado en la dirección 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>

Mira el código de arriba. La primera línea comienza con el formulario y dice que cuando se hace clic en el botón Enviar^{(submit button)} , los datos deben enviarse a maps.google.com/maps. El target=blank significa que queremos que el resultado se abra en una nueva ventana. Luego tenemos un cuadro de texto^{(text box)} para la dirección inicial^{(starting address)} , que está en blanco.

El segundo cuadro de texto^{(text box)} está oculto y el valor es la dirección de destino^{(destination address)} que deseamos. Finalmente, hay un botón de enviar con el título «Obtener direcciones». Ahora, cuando alguien escriba su dirección, obtendrá esto:

Puede personalizar las direcciones y el mapa aún más con algunos parámetros adicionales. Por ejemplo, supongamos que no desea que la vista predeterminada^{(default view)} sean mapas, sino que desea que sea Satélite^(Satellite) y muestre Tráfico^(Traffic) .

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

Observe los campos layer=t y t=hURL . ¡ layer=t es para la traffic layer and t=h means mapa híbrido! t también se puede establecer en m para mapa normal, k para satélite yp^(p) para terreno. z es el nivel de zoom^{(zoom level)} y puede cambiarlo de 1 a 20. En la URL anterior , está configurado en 7. Simplemente^(Just) agréguelos a su URL final y ahora tiene un ^(URL)formulario Obtener indicaciones de Google Maps^{(Google Maps Get Directions form)} altamente personalizado en su sitio !

Si tiene algún problema con esto, publique un comentario e intentaré ayudar. ¡Disfrutar!

Even though there are so many mapping apps and services out there to get you from point A to point B, the definitive king of maps is Google Maps. I use it on my computеr, tablet and 90% of the time on my smartphone. It’s got the best data, the mоst navigation and routing орtions and cool features like Street View and walking, bikіng and mass transit іnfo.

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!

Rate this post