Broken Maps? iFrames to the Rescue

Are your Google Maps displaying an error like the following? This page can’t load Google Maps correctly. If so, you probably need to setup your billing information and enter an API key…Or just use an iframe.

Google’s latest update requires users to enable billing with a credit card and have a valid API key for all projects. Fortunately most users can avoid entering billing information and just use iframes instead. If you’re just displaying a single location, without any additional functionality, an iframe will suffice. See instructions below to obtain and setup an iframe – it’s easy! 

Otherwise, or if you believe your site is using one of Google’s Map APIs, follow instructions here to obtain and configure an API key.


Embedding an iframe

Step 1 – Find your location on Google Maps

Simply enter your address in the search bar and hit enter.

Step 2 – Get your embed code

Once you’ve found your desired location, it’s time to copy your html code for the iframe. Simply click “Share” on the left sidebar and select “Embed a map” from the share window. Copy the iframe code and you’re ready for the final step.

Step 3 – Display your map!

Once you’ve copied the iframe code, head over to your website (or wherever you need the map) and paste the code snippet. If you’re not sure how or where to do this, ask your web-master or look up a guide online!


What if my map isn’t responsive?!

Don’t worry – we’ve got you covered.

With a few extra lines of code, you can rest assured your new map will look great on all devices.

Step 1 – Wrap your iframe

Wrap your iframe snippet inside of a div tag with a “google-map” class. Example below

<div class="google-map"> <!-- your iframe goes here --> </div>

Step 2 – Add mobile styles

Copy the CSS code below and paste into your sites stylesheet

.google-map { 
position: relative; 
padding-bottom: 75%; 
height: 0; 
overflow: 
hidden; 
} 

.google-map iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100% !important; 
height: 100% !important; 
}

Step 3 – DONE!

Enjoy your new map that will look great on desktop and mobile!


Happy Mapping!

GET YOUR LION'S SHARE OF THE WEB!

Building websites and web applications since 2010.