Aunque hay tantas aplicaciones y servicios de mapas para llevarlo del punto A al punto B, el rey definitivo de los mapas es Google Maps. Lo uso en mi computadora, mi 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 sobre caminar, andar en bicicleta y transporte público.
Pero, ¿qué sucede si tiene que usar un mapa o direcciones fuera del sitio web de Google? Suponga que tiene su propio sitio web de bodas o blog personal y los invitados pueden visitar su sitio, escribir la dirección de la que vendrán y obtener instrucciones automáticamente para llegar al lugar del evento.
Bueno, hay varias formas de lograrlo. La forma más fácil 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.
Integrar Google Map
Si desea mostrar solo las rutas de una ubicación a otra, la forma más sencilla es incrustar el mapa que está viendo utilizando el código de incrustación. Primero, continúe y configure las direcciones que desea en Google Maps, luego haga clic en el ícono de ajustes en la parte inferior derecha de la página.
Haga clic en Comparte o inserta un mapa luego haga clic en el Integrar la tarjeta lengua. Aquí puede elegir un tamaño para su mapa, luego copiar el código iframe y colocarlo 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 en el que 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.
Crea un formulario de Google Maps
Para ilustrar lo que quiero decir con el segundo método, siga adelante y escriba una dirección en los Estados Unidos 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 insertar código HTML! También es ideal para sitios web de pequeñas empresas porque puede mostrarlo 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 ruta modificada? Bueno, primero necesitamos obtener la sintaxis correcta para la URL que usa Google para las rutas. Afortunadamente, podemos resolver esto obteniendo direcciones entre dos ubicaciones 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 Comparte o inserta un mapa.
La pestaña Compartir enlace contendrá la URL, que es la misma URL en la barra de direcciones de su navegador. Continué y pegué la URL completa a continuación solo para mostrarles 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.08947m! 1m 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892
¡Ay! ¡Es bastante largo! Hay muchas cosas ahí, ¡la mayoría de las cuales simplemente no tienen sentido! Los parámetros de URL de Google Maps antes eran muy simples y fáciles, pero la nueva estructura de URL es bastante complicada. Afortunadamente, aún puede usar la configuración anterior y Google la convertirá automáticamente a la nueva versión. Para ver lo que quiero decir, consulte el enlace a continuación.
https://maps.google.com/maps?saddr=start&daddr=end
Adelante, pruébalo. Ponga 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 de Nueva Orleans y terminar con Houston, TX, así que así es como se ve la URL de mi ruta de Google Maps:
https://maps.google.com/maps?saddr=»new orleans, el «& daddr =» houston, tx «
¡Eso funciona! Sin embargo, como puede ver, Google Maps convierte los enlaces en algo mucho más complicado una vez que el mapa está completamente cargado. 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 ubicación, queremos que el segundo campo esté oculto y ya configurado para la dirección de destino.
Mira el código de arriba. La primera línea inicia el formulario y dice que cuando hace clic en el botón enviar, los datos deben enviarse a maps.google.com/maps. la objetivo = vacío significa que queremos que el resultado se abra en una nueva ventana. A continuación, tenemos un cuadro de texto para la dirección de inicio, que está vacío.
El segundo cuadro de texto está oculto y el valor es la dirección de destino deseada. Por último, hay un botón de envío con el título «Obtener direcciones». Ahora, cuando alguien escribe su dirección, obtiene esto:
Puede personalizar aún más las direcciones y el mapa con algunas configuraciones adicionales. Por ejemplo, digamos que no desea que la vista predeterminada sea mapas, sino que desea que sea Satélite y mostrar Tráfico.
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 en metro para la tarjeta normal, k para satélite y pag para el campo. z es el nivel de zoom y puede cambiarlo de 1 a 20. En la URL de arriba se establece en 7. Simplemente agréguelos a su URL final y ahora tendrá un formulario de direcciones de Google Maps altamente personalizado en su sitio web.
Si tiene algún problema con esto, publique un comentario e intentaré ayudarlo. ¡Disfrutar!