Saltear al contenido principal
Insertando Google Maps En Web Responsive

Insertando Google Maps en Web responsive

Hace unos días, para un trabajo de una web que estoy realizando, me vi en la obligación de trabajar con la API de Google Maps, cosa que nunca había necesitado. Lo primero que hice, como suelo hacer casi siempre (y os lo recomiendo encarecidamente), es dar una vuelta por la red de redes, para ver como lo hacen otros desarrolladores, ya que siempre te pueden proporcionar ideas que en principio, habías podido pasar por alto. Para mi sorpresa,  pude observar muchas webs con diseño responsive, bastante modernas y en principio bien rematadas, pero que al insertar el mapa destrozaban la experiencia cuando navegaba a través del teléfono móvil, desmontando todo el diseño y consiguiendo algo muy incómodo, que una página “Mobile” que solo debería desplazarse en vertical, falla y se desplaza en horizontal tanto como sea el ancho del mapa.

Os dejo un ejemplo de los muchos que vi:

  

Como se puede apreciar, el ancho del mapa descoloca toda la página.

No hace falta que os comente, que en pleno 2017 y desde hace un tiempo, vivimos en la época del “Mobile First”, donde por importancia cualquier web que realices con Bootstrap, WordPress etc, debe tener un diseño enfocado para nuestros teléfonos, y expandirse correctamente para visualizarse en un pc convencional, mediante diseño responsive.

Probando la API Google Maps

Viendo el percal, lo siguiente que hice fue examinar la Web de API GOOGLE MAPS , y me dispuse a probarlo, mediante la típica ‘function ‘initMap()’, la cual puedes jugar y añadir marcadores, iconos, rutas y casi todo lo que se te ocurra, pues todo está en la API y puede consultar fácilmente y en castellano (bien por los chicos de Mountain Dew). En mi caso introduje un marcador de tal forma que cuando pulsabas se desplegase información sobre ese “evento” o sitio. Currando un poco el tema llega a quedar bien, sin ser la panacea, pero bueno, queda correcto.

El problema de usar este script es que controlarlo no es nada fácil, ni con porcentajes fui capaz de controlarlo de forma rápida (seguro que ahora los gurús del frontend se echan las manos a la cabeza), con lo cual, como hemos visto más arriba en la fotos de una web random, rompía el diseño de la web en cuanto lo usaba con el teléfono móvil. No casa bien y solucionarlo pasa por liarte a ostias con CSS insertando ‘@media’s a tutiplén y otras cosillas, las cuales ni domino ni en principio lo pretendo.

Dando con la solución, como insertar Google Maps en web responsive

Convencido de que debería poderse hacer, y no ceder a la comodidad de meter una cutre-imagen, que es rápido, funciona y se controla perfectamente, me dispuse a bucear un poco más en GOOGLE MAPS EMBED API

Un simple <iframe> con los datos y propiedades. Parece prometedor pero vamos a comprobarlo. Para quien como yo, no estén muy puestos con esto de la API de GOOGLE MAPS, hay que solicitar una API KEY (¿en serio Google?) en SOLICITUD GOOGLE API KEY , que son dos minutos, pero me parece totalmente innecesario, pero bueno, es lo que hay. La dirección que nos interesa, se obtiene entrando en el propio Maps (Maps.google.com), localizando el sitio deseado y pulsando en ‘Compartir/Insertar Mapa’, tal como se ve en la siguiente imagen:

Como insertar un lugar o evento en web responsive

Por defecto, se nos proporciona el iframe a una resolución de 600×450, que ya os aviso que es mal negocio para el responsive, con lo que el ancho lo cambié por porcentaje, para que cogiera el 99% del DIV disponible, y el alto lo bajé a 500px, aunque ya va a gustos del consumidor. Os dejo el código que he usado y como queda en el simulador de Chrome, tanto en vertical como en portrait o apaisado.

<div id="contact" class="text-center"> <div class="container"> <div class="col-md-10 col-md-offset-1 section-title"> <h2>Donde encontrarnos</h2> <hr> <div class="col-xs-12 col-md-6 map1"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12774.736538385323!2d-2.4105582148627773!3d36.82608827584373!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a59668c430f3ff3!2sUniversidad+de+Almer%C3%ADa!5e0!3m2!1ses!2ses!4v1501749537659" width="99%" height="500" frameborder="0" style="border: 0px; pointer-events: none;"></iframe> </div> </div> </div> </div>

 

 

De esta forma ya tenemos nuestro objetivo situado en el mapa.

Y nada más, espero que os haya gustado. Para cualquier cosa, podéis comentar o enviarme un correo a juanjosemendez@outlook.com .

Esta entrada tiene un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Volver arriba