How To Make Google Maps Responsive

Posted on: July 24th, 2015 by BuildMyWeb No Comments

Google Maps and many others like it, make it really easy to embed a short snippet of code that will render a beautiful, interactive map on your website. It’s simply a matter of typing in your address, clicking the ‘share’ button, and grabbing the iframe embed code. In today’s mobile world, this is not enough.

How to make Google Map iframes Responsive

Google iframes come in fixed width dimensions. This will not do on a responsive site. I was recently looking for a solution that is fluid and responsive when rendering a Google Map iframe on my page. The below bit of css worked quite well for me. I want to share it for others who might look for a similar solution.

JSFiddle

On a sidenote, if you’ve ever tried pasting a snippet of code into a WordPress Post for display, rather than rendering, you know it isn’t so easy to do. If you don’t know what I am talking about, just try it. Copy my code below, paste it into a Post on your blog, and see what happens. There are many solutions to choose from for sharing code in a blog environment. I haven’t had a chance to play with too many but JSFiddle is a free service that suits my needs quite well. You can see the results below.

JSFiddle: https://jsfiddle.net/

Concept Source: http://www.labnol.org/internet/embed-responsive-google-maps/28333/

Tags: , ,

Leave a Reply