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:
- Open Google Maps
- Click on Share and Embed a Map and Copy the Embed Code
- 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.

Step 2: Generate the Embed Code
- Click the Share Icon in the map interface.
- In the Share Window, select the “Embed a Map” tab.
- Copy the provided embed code (iframe).

Step 3: Paste the Embed Code in Your Website’s HTML
- Open your HTML code file using any code editor or open your WordPress page and select an HTML widget.
- Locate the section where you want the map to display and paste the iframe code.
- 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:
- Searching for the Maps widget
- Dragging the Maps widget onto your page
- Typing in your business location name


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.