Insertar mapa de Google de manera responsiva

Cómo insertar un mapa de Google de manera responsiva

A continuación les explico como insertar un mapa de google en tu sitio web para que se adapte a el tamaño de los distintos dispositivos.

A continuación el código CSS:

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; /*puedes modificarlo para ajustar alturas*/
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

A continuación el código que te entrega google maps al compartir->insertar.

<div class="google-maps">
    <iframe src="......código de Google va aquí"></iframe>
</div>