Agregue las instrucciones de conducción de Google Maps a su sitio web

A pesar de que existen muchas aplicaciones y servicios de mapas para llegar 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ía de las opciones de navegación y enrutamiento, y funciones geniales como Street View e información sobre caminatas, ciclismo y transporte público..

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

Bueno, hay un par de maneras en que puedes ir para lograr esto. La forma más sencilla es simplemente incrustar 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é los dos métodos a continuación..

Insertar Google Map

Si solo desea mostrar indicaciones de una ubicación a otra, lo más fácil es incrustar cualquier mapa que esté viendo con el código de inserción. Primero, siga adelante y configure las direcciones que desee en Google Maps y luego haga clic en el icono de engranaje en la parte inferior derecha de la página.

Haga clic en Compartir o incrustar mapa y luego haga clic en el Incrustar mapa lengüeta. Aquí puede elegir un tamaño para su mapa y luego copiar el código iframe y soltarlo 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 a la dirección de destino que elija..

Crear formulario de Google Maps

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

Genial eh? ¡Puede crear fácilmente este pequeño formulario en cualquier sitio web, blog o en cualquier lugar donde pueda colocar algún código HTML! Esto también es ideal para los sitios web de pequeñas empresas, ya que puede incluirlo en su página de contacto y las personas pueden obtener indicaciones 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 hacemos para crear este cuadro de indicaciones modificado? Bueno, primero, necesitaremos obtener la sintaxis correcta para la URL que Google usa para las indicaciones. Afortunadamente, podemos resolverlo obteniendo indicaciones 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.

La pestaña Compartir enlace contendrá la URL, que es la misma URL en la barra de direcciones de su navegador. He seguido y pegado la URL completa a continuación para mostrarte 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: 0xbccccccgggggggggggggggggggggg! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892

¡Ay! Eso es bastante largo! ¡Hay muchas cosas ahí dentro, 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 sencillos, pero la nueva estructura de URL es bastante complicada. Afortunadamente, aún puede utilizar los parámetros antiguos y Google los convertirá en 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

Sigue adelante y dale una oportunidad. ¡Escriba una dirección entre comillas para la dirección inicial y final y pegue la URL en su navegador! Reemplacé el inicio con mi ciudad natal, Nueva Orleans, y terminé con Houston, TX, así es como se ve mi URL de direcciones de Google Maps:

http://maps.google.com/maps?saddr= voluevo 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. Ok, ahora que tenemos una URL sensata 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 solo escriban su dirección y obtengan indicaciones para llegar a su lugar, entonces queremos que el segundo campo esté oculto y ya configurado en la dirección de destino.

Ingrese su dirección de inicio:

Echa un vistazo al código de arriba. La primera línea comienza con el formulario y dice que cuando se hace clic en el botón de envío, los datos deben enviarse a maps.google.com/maps. los target = en blanco significa que queremos que 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. Finalmente, hay un botón de envío con el título "Obtener direcciones". Ahora cuando alguien escribe su dirección, obtendrán esto:

Puede personalizar las direcciones y mapear aún más con unos pocos parámetros adicionales. Por ejemplo, supongamos que no desea que la vista predeterminada sean mapas, sino que desea que sea Satélite y mostrar 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 la capa = t y t = h campos en la URL. layer = t es para la capa de tráfico y t = h significa mapa híbrido! t también se puede configurar para metro para el mapa normal, k por satélite y pag para el terreno. z es el nivel de zoom y puede cambiarlo de 1 a 20. En la URL anterior, está establecido en 7. Simplemente agregue esos a su URL final y ahora tiene un formulario altamente personalizado de Direcciones de Google Maps en su sitio!

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