Blog / Local SEO

How to Embed Google Maps on Your Website – 3 Simple Steps

Contents

Embedding Google Maps on your website allows users to easily access location information, display a map pin for a specific address, and navigate using features like directions and street view. It also boosts your local SEO.

Embedding Google Maps Manually via Code

Follow the steps below to embed Google Maps either manually or via WordPress widgets. Here’s how it works:

  1. Open Google Maps
  2. Click on Share and Embed a Map and Copy the Embed Code
  3. Paste the Embed Code in Your Website’s HTML

Step 1: Open Google Maps

Go to https://www.google.com/maps/ and search for your desired location in the search bar. You can pinpoint your business address, view a destination, or switch to satellite view for more detail.

Embed a map by going to Google Maps typing in the name and click on share

Step 2: Generate the Embed Code

  1. Click the Share Icon in the map interface.
  2. In the Share Window, select the “Embed a Map” tab.
  3. Copy the provided embed code (iframe).
Showing to click Copy HTML to embed a map

Step 3: Paste the Embed Code in Your Website’s HTML

  1. Open your HTML code file using any code editor or open your WordPress page and select an HTML widget.
  2. Locate the section where you want the map to display and paste the iframe code.
  3. Save the changes and refresh your web page to see the embedded map.

Example of an iframe Embed Code:

<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Making the Map Responsive

To ensure the map looks good on all screen sizes, you can wrap the iframe in a container with CSS:

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="https://www.google.com/maps/embed?..." style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

Embedding Google Maps Using WordPress Page Builders

Most WordPress page builders like Elementor, Divi, or WPBakery include a Google Maps widget. This method simplifies the process and eliminates the need for manual coding. Widgets often offer customization options like zoom levels, map type (default, satellite view, etc.), and marker customization.

For example in Elementor you can embed a Google Map by:

  1. Searching for the Maps widget
  2. Dragging the Maps widget onto your page
  3. Typing in your business location name
Highlighted Maps widget in elementor sidebar

As a WordPress user you might also want to learn more about How to do SEO in WordPress!

Common Issues and Troubleshooting

  • Map Not Displaying: Double-check that the iframe code was copied and pasted correctly.
  • API Key Issues: Some advanced functionalities may require an API key for integration.
  • Browser Restrictions: Ensure your site allows iframes and has no conflicting plugins or scripts.

FAQs

Can I embed Google Maps in my website for free?
Yes, you can embed Google Maps for free using the iframe embed code provided by Google Maps.

Does embedding Google Maps help SEO?
Yes, embedding Google Maps can improve local SEO by providing clear location data and enhancing user experience.

Conclusion

Embedding Google Maps is a straightforward way to enhance your website. Whether you opt for manual code or a WordPress widget, you’ll be providing your visitors with valuable location information and improving your site’s functionality. For WordPress users, be sure to explore our linked tutorial for step-by-step instructions on using Google Maps widgets.

Picture of Jonas Lindemann

Jonas Lindemann

I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.

About The Author

Picture of Jonas Lindemann

Jonas Lindemann

I’m an experienced SEO professional with over a decade of helping businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.

Got Questions? Feel Free to Reach Out!

Send us an E-Mail

Send us an email to support@lpagery.io and we will get back to you as soon as we can. Response times are usually within a few hours but can sometimes exceed that.

Learn how to do local SEO for HVAC businesses. Get more local customers searching for HVAC contractors in your area!
Learn how to boost your electrician firms local SEO by using the 5 simple steps outlined in this guide. This is how to do local SEO for electricians!
Learn effective real estate marketing strategies to attract buyers, boost local SEO, and maximize engagement through online and offline methods.
Learn effective and cost-free strategies to attract lawyer leads, enhance online visibility, and build trust without breaking the bank.

This post may contain affiliate links to some of our trusted partners. If you click on them and make a purchase, we may earn a commission at no additional cost to you.

Pro Feature

When to Use This Feature

Use Examples