Embed Google map on your webpage is very useful for online stores and shops. One way it helps people reach you, another way, you can mark your shop globally. Today, we will talk about how you can embed Google Maps on WordPress using Elementor page builder.
In the first place, Elementor has Google Map widget that you can use for this matter. However, it has limited style options. Hence today, we will be using Advanced Google Map widget by Element Pack.
No need for further introductions. Let’s start!
Complete Guide to Embed Google Map on WordPress
Whenever you want to use google map on WordPress, you need to insert an API key on your dashboard. Using this key, you need to authenticate as a user to Google. Let’s see in pictures.
First, insert the Advanced Google Map widget onto your website.
As soon as you drag and drop the widget, it will show a popup message. In order to make the map work properly, the system will ask API key from you. Let’s see how to do that.
Go to WordPress Dashboard> Element Pack> API Settings.
Here, you can see a field named Google Map API Key. Now you need to put your API key in the box and save. However, you can get the key for your embed google map on WordPress from here.
How to Use Iframe Widget in Elementor by Element Pack
<div class="bdt-ep-button-text">
<span class="avdbtn-text">
Read now </span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-f589a80 elementor-section-boxed elementor-section-height-default elementor-section-height-default magic-button-disabled-no" data-id="f589a80" data-element_type="section" data-e-type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d88d40b" data-id="d88d40b" data-element_type="column" data-e-type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-dca83ae elementor-widget elementor-widget-text-editor" data-id="dca83ae" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<p></p>
Unique Styles of the Embed Google Map on WordPress
To this point, all we did was setting up the layout. Now, we will change the outlook of the embed google map on WordPress using Elmentor.
Once again, the style tab has two sections. With the GMap Style section, you can insert any skin to your map. These skins change the details of the whole map. Hence, you only need to paste the JSON code in the marked field. Also, you may use the CSS Filters for more style.
In addition, you can import the JSON codes from Snazzymaps. They have many free and premium map skins available at a cheap rate.
Finally, the search box at the top of the map is also editable. It is very easy to change its outlook. Then again, change the color, border type, border radius, and add box shadow to the search box. Make sure that the finished product catches the eyes of the visitors.
Conclusion
Well done! You have successfully learned the whole process. With this blog, I hope you can make embed google map on WordPress using Elementor easily. For any further information, please visit our knowledge base. Without further ado, stay safe. Thanks for reading this blog!
Read more WordPress blogs
<div class="bdt-image bdt-flex">
<a href="/track-wordpress-website-visibility" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/how-to-track-if-your-wordpress-site-is-visible-in-search-engines-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="How to Track and Improve Your WordPress Website Visibility in Search Engines" title="How to Track and Improve Your WordPress Website Visibility in Search Engines"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/track-wordpress-website-visibility" class="bdt-link" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
How to Track and Improve Your WordPress Website Visibility in Search Engines </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 12, 2026</span> <span><a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/best-website-layouts-examples" title="20 Website Layout Examples to Inspire Your Next Design">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/website-layouts-examples-to-inspire-your-next-design-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="20 Website Layout Examples to Inspire Your Next Design" title="20 Website Layout Examples to Inspire Your Next Design"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/best-website-layouts-examples" class="bdt-link" title="20 Website Layout Examples to Inspire Your Next Design">
20 Website Layout Examples to Inspire Your Next Design </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 2, 2026</span> <span><a href="/category/tips-and-tricks">Tips and Tricks</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/wordpress-7-0-release-updates-features" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/WordPress-7-0-release-whats-new-1-150x150.png" class="attachment-thumbnail size-thumbnail" alt="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/wordpress-7-0-release-updates-features" class="bdt-link" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 26, 2026</span> <span><a href="/category/tips-and-tricks">Tips and Tricks</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-can-i-make-a-business-website" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/how-can-i-make-a-business-website-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How Can I Make a Business Website (Complete Step-by-Step Guide)" title="How Can I Make a Business Website (Complete Step-by-Step Guide)"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-can-i-make-a-business-website" class="bdt-link" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
How Can I Make a Business Website (Complete Step-by-Step Guide) </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 25, 2026</span> <span><a href="/category/element-pack-tips">Element Pack Tips</a>, <a href="/category/elementor">Elementor</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-make-a-website-for-my-business" title="How to Make a Website for My Business with WordPress in 2026">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/how-to-make-a-website-for-my-business-with-wordpress-in-2026-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How to Make a Website for My Business with WordPress in 2026" title="How to Make a Website for My Business with WordPress in 2026"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-make-a-website-for-my-business" class="bdt-link" title="How to Make a Website for My Business with WordPress in 2026">
How to Make a Website for My Business with WordPress in 2026 </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 24, 2026</span> <span><a href="/category/element-pack-tips">Element Pack Tips</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor" title="How to Edit WooCommerce Shop Page with Elementor">
<img width="150" height="150" src="/blog-media/embed-google-map-on-wordpress-using-elementor/how-to-edit-woocommerce-shop-page-with-elementor-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="How to Edit WooCommerce Shop Page with Elementor" title="How to Edit WooCommerce Shop Page with Elementor"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor" class="bdt-link" title="How to Edit WooCommerce Shop Page with Elementor">
How to Edit WooCommerce Shop Page with Elementor </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 23, 2026</span> <span><a href="/category/elementor">Elementor</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/woocommerce">WooCommerce</a></span> </div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
<div id="bdt-loading-image" style="display: none;">
<div class="bdt-spinner-box">
<div class="bdt-circle-border">
<div class="bdt-circle-core"></div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Selim Rana
The BdThemes team builds WordPress plugins trusted by 3M+ users worldwide. We write about web accessibility, WCAG compliance, and inclusive design.