Como tener mapas de Google Maps Responsive gratis que se adaptan al tamaño de la pantalla

Insertar mapas de Google Maps Responsive gratis en tu web es posible y en este post te enseñaremos como hacerlo.

Desde los orígenes de Google Maps, existía la opción de usar su API para para que los desabolladores de software pudiesen utilizarla de un modo más o menos gratuito. Desde el 2018 es uso de esta API ya no es gratis por lo que los que estamos interesados en insertar los mapas de Google Maps sin pagar hemos de conformarnos con otras opciones y entre ellas, la más sencilla y rápida de implementar es la que trataremos en este post.

Para los que nunca hayan utilizado la API de Google Maps les podemos decir que las funcionalidades que ella puede aportar a la hora de programar mapas complejos es excelente y con una enorme cantidad de opciones de personalización pero como ya hemos dicho, el acceso a esta dejó de ser gratuito. Si bien es cierto que los precios por el uso, que se basan en volúmenes de impresiones, no son demasiado prohibitivos y además, Google nos ofrece un gratuito mensual gratuito de 200$. Podéis ver los detalles de las listas de precios por el uso de las distintas APIs de mapas pulsando sobre estas líneas.

Para los programadores web que sólo necesitamos la simple impresión de un mapa en nuestras webs, no necesitaremos pagar nada y nos bastará con seguir los pasos que veremos a continuación para conseguirlo.

 

Código para tener Mapas de Google Maps Responsive gratis

Existen diferentes modos de conseguir este propósito; Principalmente mediante Javascript, pero el que proponemos desde Elocuencia.org es mucho más sencillo e igual de efectivo y lo conseguiremos solamente usando CSS.

Para insertar los mapas de Google Maps en una web, Google nos ofrece la opción gratuita de hacerlo por iframes. La nomenclatura de esta es la que sigue, aunque existe variaciones que aportan o restringen funcionalidades:

-Iframe por coordenadas:

<iframe class=»mi_iframe» src=»https://maps.google.com/?ll=LATITUD,LONGITUD&z=ZOOM&t=h&output=embed» width=»ANCHO_MAPA» height=»ALTO_MAPA» frameborder=»0″ style=»border:0″ allowfullscreen></iframe>

Nótese que las coordenadas están en formato decimal o no en grados geográficos. Existen numerosas aplicaciones online gratuitas para hacer este tipo de conversiones.

Ejemplo:

<iframe class="mi_iframe" src="https://maps.google.com/?ll=38.27037293,-4.32426689&z=11&t=h&output=embed" width="600" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>

-Iframe por lugar o dirección:

<iframe class=»mi_iframe» src=»https://www.google.com/maps/embed?pb=LUGAR_O_DIRECIÓN» width=»ANCHO_MAPA» height=»ALTO_MAPA» frameborder=»0″ style=»border:0;» allowfullscreen=»»></iframe>

Ejemplo:

Mostrará mapa de Barcelona.

<iframe class="mi_iframe"  src="https://maps.google.com/maps?width=100%&height=600&hl=es&q=barcelona&output=embed" width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Mostrará el mapa de la dirección: La Rambla, 1 Barcelona, Spain

<iframe class="mi_iframe"src="https://maps.google.com/maps?width=100%&height=600&hl=es&q=La%20Rambla%2C%201%20Barcelona%2C%20Spain&ie=UTF8&t=&z=14&iwloc=B&output=embed"  width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Despues de esta pequeña introducción sobre las diferentes nomenclaturas del iframde de Google Maps pasaremos a ver como conseguir que los mapas se adapten automáticamente al tamaño de la pantalla del dispositivo en el cual se visualizan, es decir, convertirlo en un mapa RESPONSIVE.

 

Google Maps Responsive gratis con CSS

Como ya hemos adelantado, solucionaremos el problema de convertir nuestro mapa de Google Maps con disensiones predefinidas a uno responsive que se adaptará a cualquier tipo de resolución de pantalla.

  1. En primer lugar, encerraremos nuestro iframe en un div
  2. Aplicaremos algunas reglas sencillas CSS

¡Esto es todo!

Pasemos a la acción y veamos un fragmento de código de ejemplo mediante el cual tendremos nuestros Mapas de Google Maps Responsive gratis.

En nuestro HTML:

<div class="mi_mapa_responsive">
<iframe class="mi_iframe" src="https://maps.google.com/?ll=38.27037293,-4.32426689&z=11&t=h&output=embed" width="600" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

En nuestro CSS:

.mi_mapa_responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.mi_mapa_responsive{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;

 

Pues realmente esto es todo lo necesario para poder insertar mapas de Google Maps en una web sin pagar por nuestra API KEY. Otro detalle importante a tener en cuenta ya que seguro que no nos gustaría mucho enfadar al tito Google es que esta forma de mostrar mapas de Google Maps en nuestras webs está totalmente permitido (por ahora) por la mega compañia.

 

Quizás también le interese el artículo: ¿Como me vería sin pelo?

déjame calvo portada

5/5 - (4 votos)