NorfiPC
NorfiPC » Mapas » Insertar Google Maps

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



Mostrar Google Maps en las páginas de un sitio web, insertándolos en marcos, sin pagar por una clave de API. Configurar distintos tipos de mapas y hacerlos adaptables.
Como insertar los mapas de Google en una página con un iframe. Códigos y trucos
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:
m – Normal, muestra la vista del mapa de carreteras predeterminado.
k – Vista aérea con imágenes satelitales de Google Earth.
h – Hibrido, combinación de vistas normales y satelitales.
p – Terrain. Mapa físico basado en información terrestre.



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:

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:
- Accede a Google Maps y carga la región del mapa que deseas mostrar.
- Da un clic en el icono de tres rayas en la barra izquierda para abrir el menú y escoge: "Compartir o insertar el mapa".
- En el cuadro Compartir abre la pestaña "Insertar un mapa".
- Escoge el tamaño y presiona "COPIAR HTML", para copiar el código del iframe.
El código así obtenido posee la dirección codificada y se hace algo difícil modificarlo, pero funciona.

Páginas relacionadas



Sígueme en las redes sociales


 
Inicio | Mapa del sitio | Buscar | Sobre mí