Cómo hacer responsive un mapa de Google Maps

publicado por: Anonymous

¿Cómo puedo hacer responsivo al incorporar el mapa de google maps?

Por ejemplo, esta es la línea de etiquetado que te genera google para insertarlo en tu html:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13566.89508901391!2d35.2354079!3d31.7780191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe33f01a44e2808aa!2sDome+of+the+Rock!5e0!3m2!1ses-419!2smx!4v1477799410016" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

En la hoja de CSS, ¿cómo lo puedo hacerlo responsive?

solución

Mediante css sería

iframe {
 max-width: 100%;
 height: auto;
}

Otra opción sería añadir el iframe dentro de un div y empleando bootstrap asignar la clase row

<div class="row">
<iframe src="..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *