Embed a Responsive Google Map

Make a Google Map Responsive It's easy to embed a Google Map using the HD-Anycode module but as an iframe based service Google Map embeds are not responsive. Meaning your beautifully designed contact page looks on mobile view because the width of the map is always forced at 600px.
Even changing the width value in the embed code from px to % doesn't seem to do anything.

But with a bit of sneaky CSS you can easily fix the issue.

First of all paste your original embed code into the HD-AnyCode module.
Then wrap the code in a div and give it the class "goomap" (don't forget the closing </div>).

eg.

<div class="goomap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2456.7561700046926!2d-0.36493308421211934!3d51.99309767971797!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876356cf53148df%3A0x92e49abcf3c4e05f!2sSolar+House%2C+28+Church+St%2C+Shillington%2C+Hitchin%2C+Central+Bedfordshire+SG5+3LH%2C+UK!5e0!3m2!1sen!2sus!4v1461753109746" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Then at the top of the box add the following code...

<style>
.goomap {position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.goomap iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
</style>

Voila! Everything is responsive.

HD-Anycode