Como insertar los mapas de Google en una página con un iframe

En esta página explico cómo insertar mapas de Google en las páginas de un sitio, dentro de un iframe o marco y comparto trucos para personalizarlos.

Como mostrar mapas de Google Maps en páginas web

Google ha hecho difícil a los desarrolladores la opción de agregar mapas de su servicio de Google Maps, en las páginas de los sitios web.
Durante años esta opción fue posible de forma gratis, primero usando la API 2 y posteriormente con la API 3, en la que no era necesario clave alguna.
A partir del 2018 el cambio fue brusco, exigiendo una clave de API por la que hay que pagar.
Desde ese momento las páginas con mapas insertados usando los sistemas anteriores perdieron sus funcionalidades.
Pero al mismo tiempo Google facilita insertar los mapas en las páginas, mediante iframes o marcos.
La diferencia es que con este último sistema, no se le puede agregar ninguna funcionalidad, como controles, marcadores, globos de información, imágenes y otros elementos.
A pesar de eso para algunos un mapa simple es suficiente y lo que necesitan para complementar el contenido de un artículo.

Insertar un mapa de Google en un iframe o marco

El código del iframe es bastante sencillo.
Solo se necesita además de los parámetros para que el marco se muestre correctamente, una dirección URL con el siguiente formato:

https://maps.google.com/?ll=LONGITUD,LATITUD&z=ZOOM&output=embed

Podemos modificar los siguientes valores:
- La longitud, por ejemplo: 23.1234
- La latitud, por ejemplo: -84.5678
Ambas deben estar en formato decimal.
Para convertir grados geográficos a decimales, utiliza la siguiente herramienta: Convertir grados geográficos a decimales
- El nivel de zoom.
Los niveles se pueden definir entre 1 para todo el mundo y 21 como máximo, aunque solo disponible en algunas zonas.
- El tipo de mapa.
Se especifica usando los siguientes caracteres:

Mapa de ejemplo insertado con un iframe

Para insertar en esta página el mapa de Google a continuación, se usa el siguiente código.

<iframe class="iframe" src="https://maps.google.com/?ll=23.135249,-82.359685&z=14&t=m&output=embed" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>

Otra opción es mostrar el mapa solo a petición del usuario, escribiendo el iframe con innerHTML de JavaScript y usando un evento como un enlace o un botón, para evitar el consumo excesivo de datos y de ancho de banda del servidor.
Pruébalo:
Mostrar mapa
En este caso se especifica como tipo de mapa "k" (Vista aérea con imágenes satelitales).

Como hacer el mapa adaptable

Para lograr que el mapa se adapte a cualquier pantalla, no puede emplearse en el iframe la propiedad "width".
Lo ideal es encerrar el marco en un contenedor con una clase y asignar en un regla de estilo CSS, el ancho al 100%.
Por ejemplo:

.mapa iframe{width:100%;}

Obtener el código del iframe en Google Maps

Los que consideren más fácil y sencillo obtener el código del iframe en Google Maps, pueden hacerlo de la siguiente forma:
El código así obtenido posee la dirección codificada y se hace algo difícil modificarlo, pero funciona.

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales