How to add Responsive google Map in Webpage

In the video I have shown how you can integrate a responsive google map in web page.

Source code.

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d89312.69422305877!2d76.94539905957078!3d8.391752692980724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b05a5090a19ec65%3A0xb67f315bc0b762ac!2sKovalam%2C+Kerala%2C+India!5e0!3m2!1sen!2s!4v1480351027952" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

</div>

Sample google map is shown below, Try reducing the page size of the window to see the responsive behavior of the MAP.