Google Maps es una de las mejores utilidades para llegar a la web. Se ha convertido en la forma estándar para que las personas obtengan indicaciones en línea, vean imágenes de satélite y del terreno y realicen cualquier otra tarea relacionada con el mapa.
Existen varios motivos por los que desearía incrustar un mapa de Google en su página web, ya sea con fines funcionales, como guiar a los usuarios a su ubicación física, o con fines estéticos, como usar el mapa para un gráfico de fondo. Hoy vamos a ver dos formas en que puede realizar esta tarea: la forma rápida y fácil y la ruta API potente y flexible.
Incrustar un mapa de Google
Lo primero que aprenderemos a hacer es una inserción simple y directa de un mapa de Google. La funcionalidad aquí es bastante limitada pero es muy fácil.
Lo primero que debe hacer es ir a Google Maps como lo haría si estuviera buscando direcciones. Simplemente escriba la dirección donde desea que comience el mapa.
Ahora haga clic en el pequeño icono de enlace en la parte superior derecha de la pantalla. Esto debería abrir una pequeña ventana que incluye un enlace puro y un fragmento de código HTML, copiar el segundo en su portapapeles y pegarlo en un documento HTML.
El HTML
¡Eso es todo al respecto! Esto debería darle un mapa en vivo en su página web. Sin embargo, es probable que nunca desee pegar el código y terminar, sino que debe diseñarlo para que se ajuste a sus necesidades.
Para hacer esto, echemos un vistazo al código en bruto que resulta:
Ahora, esto puede parecer un gran lío pero es bastante fácil de clasificar. Los enlaces son realmente el resultado de todo ese código de aspecto desagradable, así que tiremos esos solo para el propósito del ejemplo. Ahora el código parece mucho más manejable.
Podemos ver algunos controles de estilo en línea bastante básicos aquí. Para empezar, intentemos redimensionar el mapa a 600px de ancho. Podemos envolver eso fácilmente en un div y centrarlo. También he cambiado el color del enlace cerca del final a blanco.
Digamos que queríamos divertirnos un poco más con esto. Desechemos completamente el último enlace y configuremos nuestro ancho para que se extienda por toda la página. El código para esto es agradable y conciso.
Pantalla completa: la manera rápida y sucia
El truco anterior es perfecto para integrar un mapa en vivo en tu página de contacto, pero digamos que querías que el mapa fuera más una característica de diseño que una utilidad. Es bastante fácil usar esta misma técnica y estirar el mapa en toda la pantalla.
El HTML
Para comenzar, cree dos divs, uno que contenga cualquier ilustración, texto, etc. y otro para el mapa. Introduje un texto básico para la parte de superposición y pegué mi mapa en la segunda división. Observe que eliminé la parte del enlace al final del enlace de inserción, así como los estilos de tamaño cerca del comienzo del enlace.
Eso es realmente todo el marcado que necesitamos. Vamos a saltar a nuestro CSS para que todo se vea bonito y apilarlo bien.
El CSS
Lo primero que querrás hacer es apuntar el iframe en nuestra división de mapas y establecer su altura y ancho en 100%. Esto asegurará que nuestro mapa se extienda por todo el tamaño de la ventana del navegador.
Actualización: esto funciona en Safari, pero resulta que hacer que Firefox muestre un div a 100% de altura es más complicado de lo que pensé. Echa un vistazo a este artículo para más detalles.
A continuación, diseñamos la superposición. La clave aquí es establecer el posición propiedad a absoluto, que lo sacará del flujo normal del documento y lo colocará en la parte superior del mapa. Desde aquí podemos peinarlo y colocarlo en su lugar.
Quería una barra negra ligeramente transparente por lo que utilicé rgba Se establece en un 90% de opacidad. Desde aquí, agregué un margen en la parte superior y configuré las fuentes para ambas etiquetas de texto usando la abreviatura de CSS.
Se creativo
¡Puede tratar el mapa como cualquier otro elemento de la página, así que experimente cambiando su forma, aplicando efectos y cualquier otra cosa que pueda encontrar!
Las API de Google Maps
Apenas hemos arañado la superficie de lo que puede hacer con Google Maps en su sitio. De hecho, Google tiene toda una familia de API destinadas a ayudarlo a estructurar, diseñar e integrar versiones altamente personalizadas de sus mapas.
El método iframe anterior es divertido y simple, pero la mejor ruta para integrar mapas en su sitio es probablemente la API de JavaScript. Usando esto, todo lo que tienes que hacer para incrustar un mapa es crear un div con una ID específica, así:
Luego salta a su JavaScript, llama a una función, configura algunas opciones y las almacena en una variable, y crea el mapa con la ID del HTML anterior.
La API le proporciona una tonelada de opciones para ajustes como el nivel de zoom y los controles visibles. Incluso puedes personalizar los pequeños marcadores de mapa con tus propias imágenes.
Tutoriales API
Si desea comenzar con las API de Google Maps, aquí hay algunos enlaces que definitivamente querrá revisar.
- Tutorial oficial de Google JavaScript API
- Wade Hammes: configurar un mapa de Google como fondo de su sitio web
Mapas estáticos
¿No quieres un mapa interactivo? Echa un vistazo a la documentación para agregar un mapa estático.Muchas de las características son las mismas, el resultado es simplemente una imagen sin movimiento en lugar de un mapa real con el que los usuarios pueden jugar.
Conclusión
En resumen, si desea un mapa de Google en su sitio sin esfuerzo, siga los pasos anteriores para ir a la ruta de iframe. Su control sobre el mapa es limitado, pero puede divertirse mucho al incluirlo en la página. Si necesita más funciones y flexibilidad, regístrese para obtener una clave API gratuita y siga la ruta de JavaScript.
Deja un comentario a continuación y muéstranos cualquier página que hayas creado con Google Maps. ¿Qué técnicas y recursos has encontrado útiles?