How to Add your Google Maps Location on your Framer Website

Cover image for a blog article displaying the steps to add Google Maps on a Framer website
Cover image for a blog article displaying the steps to add Google Maps on a Framer website
Cover image for a blog article displaying the steps to add Google Maps on a Framer website

Displaying your business office address on your website with a Google Maps embed is quick and easy to do on Framer. Whether you want to provide clear directions or show your office location for credibility, you have two options for adding Google Maps to your Framer website: using coordinates or embedding an iframe. In this guide, we’ll walk you through both methods.

1. Using Coordinates

Let’s begin by adding your location’s coordinates. On the top left of the Framer interface, click on the Insert button (plus icon) and search for Maps. Drag the Maps component onto your canvas.

Inserting the Google Maps component on Framer

Once the component is placed on the canvas, it’s time to input your coordinates. Select the map component, and you’ll see a section in the properties panel (on the right) labelled GoogleMaps. Here, you can add your coordinates and adjust the zoom level to determine how close or far the view should be.

Google Maps properties settings in Framer for customising map appearance and functionality

To find your location’s coordinates, you can simply search for your business address on Google Maps. When entering the coordinates, ensure you remove any degrees symbols (°) or letters.

Example of correctly adding coordinates to a Google Map on a Framer website

2. Embedding an Iframe

If you don't have your location’s coordinates handy, you can embed a map using an iframe instead.

To do this, click on Insert (plus icon) and search for Embed. Drag the Embed component (last on the list) onto the canvas.

Inserting the Embed component on Framer

With the component selected, head over to the properties panel on the right. Change the Embed property type from URL to HTML. Don’t worry, you won’t need to write any code. Instead, you’ll copy and paste the iframe link from Google Maps, which is recognised as HTML.

Properties panel of the embed component on Framer showing customisation options

Now let’s add your iframe link. Search for your location on Google Maps:

Here’s how to get the iframe code:

  1. Go to Google Maps and find your business location.

  2. Click on Share and select Embed a map.

  3. Copy the HTML code provided.

Return to your Framer website and paste the HTML code into the Embed component’s field.

Google maps locationSharing a Google Maps locationInserting the iframe code in Framer to display a Google Maps location on the website

Once you've added your Google Maps location, make sure to publish your website (click the blue "Publish" button on the top right) to see the changes live.

Example of a Google Maps embed on a Framer website displaying a specific location

3. Conclusion

Adding your business office address or location to your Framer website using Google Maps is a simple and effective way to enhance your website's usability and professionalism. Whether you choose to use coordinates or an iframe, you can have your location displayed on your website in just a few steps.

If you're having trouble connecting Google Maps on your Framer website, or if you'd like some extra guidance, don’t hesitate to reach out.

Each of our templates comes with step-by-step video tutorials, making it simple for you to customise and launch your website with confidence. Whether you need a portfolio, blog, or business site, our templates are designed to be flexible and user-friendly.

Free training

Learn how to build an advanced no-code Framer website from scratch.
Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Pro Shot

Promote your iPhone Pro photography masterclass.

Course landing page Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Financial GPT

Launch your next innovative AI platform with full-scale website.

AI startup Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template
Subscription

Achieve consistent MRR with an attractive website.

Design agency's Framer website template

Remix. Customise. Publish.

All done in a few clicks.

Framer website template

Save time and money with the modern way of building a website.

Framer website template

Save time and money with the modern way of building a website.

Framer website template

Save time and money with the modern way of building a website.

Affiliate program

Earn up to $199 per order as an affliate.

Affiliate program

Earn up to $199 per order as an affliate.

Affiliate program

Earn up to $199 per order as an affliate.

Autumn Sale | 20% off on all templates