See How Contractors Stay Booked Up
Watch a short walkthrough of how I get contractors found and called, then book a time with me if it fits.
👋 Hey Webflow fans! No matter if you’re new to web design or a seasoned pro, we’ve have a web design tutorial that’s going to level up your skills.
Want to add a Google Map to your Webflow site and make sure it looks good on any device? You’re in the right place to learn how to embed google maps into your Webflow websites.
In this tutorial series, I am going to show you how to add these responsive maps to your web pages for free. You won't have to pay an API fee if you follow our step by step guide.
Make Your Site More User-Friendly with Maps
In the web design world, it’s all about making things easy and enjoyable for your visitors. Adding maps to your contact or location pages does just that—it makes things more personalized and user-friendly.
A map allows your website visitor to see exactly where your store or business is located. They won't have to leave your site and open a new app.
The maps we will add will be responsive. They will look great on any device –– whether someone is viewing your website on a computer or a phone.
Here’s What You'll Learn:
- Starting with the Basics: We’ll show you how to get a Google Map iFrame into your Webflow static page. If you’ve seen stuff like "width 600 height 450" or "frameborder 0 style border" and wondered what it’s all about, we’re breaking it down for you.
- Making Maps Responsive: We’re not just adding any map; we’re adding a map that adjusts perfectly to different devices. We’ve got all the tips you need.
- Working with Dynamic Pages & Webflow's CMS: If you’re looking to add maps to dynamic content or using Webflow’s CMS, we’ll cover how to display dynamic location data.
By the end of this tutorial, adding a responsive Google Map to your Webflow will be second nature. You’ll know the steps and understand why they’re important, giving you a solid understanding of this key web design feature.
So, whether you’re working on a simple landing page, creating complex website, or just excited to pick up some new web design tricks, this tutorial is your go-to guide.
Ready to learn? We’re walking you through every step, so you’ll finish up feeling more confident and knowledgeable with your Webflow projects.
Keep experimenting, keep learning, and most importantly, keep that creative spark alive!
The Code
Here is the code I used in the video. You can use it in your Webflow project to add a dynamic Google map embed to your website.
<code>
<style>
/* add to comment out html to get it to show up
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1434.9963863679732!2d-81.09214976184231!3d32.07993119881848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88fb9e6425f2f7cb%3A0x5f5b405404dfc7aa!2sJohnson Square%2C Savannah%2C GA 31401!5e1!3m2!1sen!2sus!4v1677089842277!5m2!1sen!2sus" width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
*/
/* START of CSS */
/*target the div with class google-map*/
.google-map {
overflow: hidden;
padding-top:56.25%;
position:relative;
}
/* target the iframe within the div with class .google-map iframe */
.google-map iframe {
left:0;
top:0;
right:0;
bottom:0;
height:100%;
width:100%;
position:absolute;
}
</style>
</code>
10 Marketing Mistakes Contractors Make
A free guide to the 10 ideas that sound reasonable but cost you jobs, and the 10 rules that keep your phone ringing and your calendar booked up.
Questions You Might Be Asking
No. The iframe embed method uses Google's free Maps Embed API, which doesn't require an API key or billing setup. You only need a key if you switch to the JavaScript Maps API for advanced customization like custom markers or styled map layers.
That percentage creates a 16:9 aspect ratio box that scales with its container width. Because padding-top percentages are calculated from the parent's width, the height grows proportionally as the viewport shrinks. The absolutely positioned iframe then fills that box, giving you a responsive map without fixed pixel dimensions.
Yes. Add a plain text field to your CMS collection for the embed URL, then drop an embed element inside your collection template and bind the src attribute to that field. Each CMS item will render its own map without any extra code per page.
Make sure you copied the full iframe src from Google Maps Share → Embed a map, and that the wrapper div has the google-map class exactly as written in the CSS. Also confirm the CSS lives inside a style tag in page settings or an embed — Webflow's Designer won't render iframes from custom code until you publish or preview.
