Creating a full-width Responsive Google Map

I think anyone who has created a website using a Google-map can agree that one of the easiest ways to display a Google Map is to embed it in an <iframe>. But what if you want to use it as a header image, or any width that is not pixel based? The trick is to adjust the aspect ratio and apply it to the bottom padding.
We’ll start with a Google Map. The Google Map interface is prone to change but as of today you can go to the little settings cog and choose to share or embed a map.

Google Map Embed

You can even create a custom size for your embedded map.

Custom size for Google map embed

But that’s the easy part. What about making it full-width?
Read more…