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!

Ask the Expert: Optimizing your Google My Business listing

Ask the Expert is a blog series dedicated to answering your questions regarding entrepreneurship in the digital age.

When you’re starting or running your own business, it can be tricky to keep track of what types of accounts to maintain and how to optimize them. From Facebook to Yelp! reviews to your website, managing your digital presence can be a full-time job in and of itself. Plus, constraints, recommendations, and best practices are constantly changing, forcing most entrepreneurs to play catch-up or refrain from doing anything at all. The latter is what we all want to avoid since your business will likely suffer without social media and SEO. How do you draw the line?

Continue reading “Ask the Expert: Optimizing your Google My Business listing” »

Google Adds Copyright Removal Reporting for Search

Google has announced that they will begin reporting on the instances of requests to remove search results by copyright owners based on the premise of copyright infringement. The takeaway from this is that the company intends to continue to be very open and honest with its end users with the way that the search results work, without giving away the secret Google formula that creates search results.

How it works:
Google will release a report that discloses the number of requests they get, and the organizations those requests are originating from, to remove Google Search results because they allegedly link to infringing content. The disclosed information will specifically include the following who requested the correction, which organization does the requesting agent represent, and which website is being contested.
Continue reading “Google Adds Copyright Removal Reporting for Search” »

GET YOUR LION'S SHARE OF THE WEB!

Building websites and web applications since 2010.