Agregar direcciones de conducción de Google Maps a su sitio web

Facilita que tus clientes o amigos te encuentren

A pesar de que existen tantas aplicaciones y servicios de mapas disponibles para llevarlo 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 rutas y características interesantes como Street View e información para caminar, andar en bicicleta y transporte público.

Pero, ¿qué sucede si necesita usar un mapa o direcciones fuera del sitio web de Google? Suponga que tiene su propio sitio web de bodas o un blog personal y los invitados pueden visitar su sitio, escribir la dirección de la que vendrán y obtener automáticamente indicaciones para llegar al lugar del evento.

Bueno, hay un par de formas en las que puede lograrlo. La forma más sencilla es simplemente incrustar el mapa en su página web utilizando el código de incrustació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 las direcciones de una ubicación a otra, lo más fácil es incrustar cualquier mapa que esté viendo utilizando el código de incrustación. Primero, 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.

compartir o insertar mapa

Haga clic en Compartir o incrustar mapa y luego haga clic en la pestaña Incrustar mapa . Aquí puede elegir un tamaño para su mapa y luego copiar el código iframe y colocarlo en cualquier página web que desee.

insertar mapa

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 a una dirección de destino de su elección.

Crear formulario de Google Maps

Para ilustrar lo que quiero decir con el segundo método, siga adelante y escriba una dirección de EE. UU. En el cuadro a continuación para obtener direcciones desde su ubicación hasta mi casa:

Ingrese su dirección de inicio:  <input type=”submit” value=”Obtener las direcciones”/>

Genial, ¿eh? ¡Puede crear fácilmente este pequeño formulario en cualquier sitio web, blog o en cualquier lugar donde pueda introducir un código HTML! Esto también es excelente para sitios web de pequeñas empresas, ya que puede publicarlo en su página de contacto y las personas pueden obtener direcciones rápidamente, en lugar de tener que copiar su dirección, abrir una nueva ventana y luego escribir su dirección de inicio.

Entonces, ¿cómo vamos a crear este cuadro de obtención de direcciones modificado? Bueno, 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. 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 .

compartir o insertar mapa

La pestaña Compartir enlace contendrá la URL, que es la misma URL en la barra de direcciones de su navegador. Seguí adelante y pegué la URL completa a continuación solo para mostrarles cómo se ve.

compartir mapas de enlaces

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! 1m1m 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 solían ser muy sencillos y fáciles, pero la nueva estructura de URL 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, consulte el enlace a continuación.

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

Adelante, pruébalo. Escriba una dirección entre comillas para la dirección inicial y final y pegue la URL en su navegador. Reemplacé comenzar con mi ciudad natal Nueva Orleans y terminar con Houston, TX, así que 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 y otro para la dirección de destino.

Si desea que las personas simplemente escriban su dirección y obtengan indicaciones para llegar a su lugar, entonces queremos que el segundo campo esté oculto y ya configurado para la dirección de destino.

<form action = ”http://maps.google.com/maps” method = ”get” target = ”_ blank”>
Ingrese su dirección de inicio:
<input type = ”text” name = ”saddr” />
<input type = ”Hidden” name = ”daddr” value = ”854 Deerfield Rd, Allen, TX” />
<input type = ”submit” value = ”obtener indicaciones” />
</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, los datos deben enviarse a maps.google.com/maps. El target = en blanco significa que queremos el resultado se abra en una nueva ventana. Luego tenemos un cuadro de texto para la dirección de inicio, que está en blanco.

El segundo cuadro de texto está oculto y el valor es la dirección de destino que deseamos. Por último, hay un botón de envío con el título “Obtener direcciones”. Ahora, cuando alguien escriba su dirección, obtendrá esto:

mapas de direcciones

Puede personalizar las direcciones y el mapa aún más con algunos parámetros adicionales. Por ejemplo, digamos que no desea que la vista predeterminada sea mapas, sino que desea que sea Satélite y muestre Tráfico .

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 = h en la URL. layer = t es para la capa de tráfico y t = h significa mapa híbrido. t también se puede establecer en m para mapa normal, k para satélite  yp para terreno. z es el nivel de zoom y puede cambiarlo de 1 a 20. En la URL anterior, está configurado en 7. Simplemente colóquelos en su URL final y ahora tendrá un formulario de direcciones de Google Maps altamente personalizado en su sitio. !

Si tienes algún problema con esto, publica un comentario e intentaré ayudarte. ¡Disfrutar!

Leave a Comment

Your email address will not be published.