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!

Client Showcase: MSU National Golf Championship

Legendary Lion is so much more than a web design firm. We offer brand design, search engine optimization and content development services for entrepreneurial clients of all shapes and sizes. Check out what we’re capable of!

Project Discovery

Matthew Myers is the chair of the MSU National Golf Championship, which is the primary project of the California Central Coast Michigan State University Alumni Club based in Monterey, California. The outdated, convoluted static site they had created for the golf tournament was neither informative nor navigable and didn’t come close to embodying the essence of the event.

Held annually at Pebble Beach Resorts, ‘Spartans at Pebble Beach’ pairs a premier golf experience with the very best in California Central Coast hospitality, all while raising funds for the next generation of Spartans.

Web Design

We redesigned his website, spartansgolfpebblebeach.com:

Continue reading “Client Showcase: MSU National Golf Championship” »

Client Showcase: Treehouse Counseling Services

Legendary Lion is so much more than a web design firm. We offer brand design, search engine optimization and content development services for entrepreneurial clients of all shapes and sizes. Check out what we’re capable of!

Project Discovery

Mary Ruth Cross has been working as a Marriage and Family Therapist for over 20 years. She had decided to rebrand her San Ramon Children and Family Counseling Center to reflect the well-rounded, 360-view with which she treats her clients. Because she specializes in play therapy and works primarily with children, she wanted to create a brand that is warm and inviting, gentle and deeply present.

Continue reading “Client Showcase: Treehouse Counseling Services” »

Meet the Team: Josh Watson, Web Developer

Josh is our go-to for all things development. He has over ten years of experience in the industry and is constantly surprising us with his wealth of knowledge about development, design, and SEO. You can get to know Josh a little more by reading on:

Continue reading “Meet the Team: Josh Watson, Web Developer” »

GET YOUR LION'S SHARE OF THE WEB!

Building websites and web applications since 2010.