💬 Prashant’s Note
When I’m building a contact page for a client — say a physiotherapy clinic in Melbourne or a hair salon in Texas — the Google Map is almost always the first thing they ask about. The part that confuses most people is the API key: they see the Google Cloud Console and immediately panic. Here’s how I explain it to every client: think of the API key as a permission slip that tells Google your website is allowed to show its maps. You create it once, paste it into Elementor’s settings, and you’re done — you never have to touch it again.
Table of Contents
What Is the Elementor Google Maps Widget?
The Elementor Google Maps widget is a built-in drag-and-drop element available in the free version of Elementor. It lets you embed an interactive Google Map directly onto any page of your WordPress website — no shortcodes, no iframes to paste manually, and no coding required. Once added, the map is fully interactive: visitors can zoom in and out, switch between map and satellite view, and click through to get directions in Google Maps — all without ever leaving your website. The widget is perfect for displaying your business address on a contact page, showing event locations, or helping customers navigate to your physical store. It works with the free Elementor plugin and does not require Elementor Pro.
Why Your Local Business Website Needs a Google Map
If you’re running a local business — a salon, clinic, restaurant, gym, or coaching studio — a Google Map on your contact page is not optional. It’s one of the most practical things you can do for your visitors. Here is why it matters: – Customers can see exactly where you are and how far they are from you – They can tap the map on mobile and get turn-by-turn directions instantly – It builds trust — a real, verifiable address on a map signals that you’re a legitimate business – It can support your local SEO by reinforcing your location signals on the page – It reduces back-and-forth messages asking “where exactly are you?” In my experience building websites for local businesses across the US, UK, and Australia, the contact page with an embedded map is consistently one of the most visited pages on the site. It’s worth getting right.
What You Need Before You Start
Before you open Elementor and start dragging widgets, make sure you have these three things ready: – A WordPress website with the free Elementor plugin installed and activated – A Google account (a regular Gmail account is fine) – A few minutes to set up a Google Cloud project and generate an API key You do not need Elementor Pro for this. The Google Maps widget is available in the completely free version of Elementor. You also do not need any paid plugins or third-party addons — though those exist if you want more advanced features like multiple custom markers or custom map styles.
Step 1: Generate Your Google Maps API Key
This is the step that most people find intimidating, but it’s actually quite straightforward once you know where to go. – Go to the Google Cloud Console at console.cloud.google.com – Sign in with your Google account – Create a new project (give it any name, for example “My Business Website”) – Once the project is created, set up a billing account — Google requires this even though the Maps Embed API usage for a small business website is almost always within their free monthly tier – Go to APIs & Services > Library and search for “Maps Embed API” — enable it – Go to APIs & Services > Credentials and click “+ Create Credentials” then select “API key” – Your API key will be generated and displayed — copy it For your own security, it is a good idea to restrict the key so it can only be used on your specific website domain. You can do this under the key’s settings in the Credentials section.
Step 2: Add Your API Key to Elementor
Now that you have your API key, adding it to Elementor takes about 30 seconds. – Go to your WordPress Dashboard – Navigate to Elementor > Settings – Click on the Integrations tab – Find the field labelled “Google Maps Embed API” and paste your API key into it – Click Save Changes That’s it. Elementor is now connected to Google Maps and the widget will work across your entire website. You only ever need to do this once.
Step 3: Add the Google Maps Widget to Your Page
With your API key saved, open the page where you want to display the map in the Elementor editor. – In the Elementor widget panel on the left, search for “Google Maps” – Drag the Google Maps widget and drop it into the section on your page where you want the map to appear – The widget will appear on the canvas with a default location placeholder The widget options will load in the left-hand panel, ready for you to configure.
Step 4: Configure Location, Zoom, and Height
Now it’s time to set up what the map actually shows. – In the Content tab on the left panel, find the Location field and type in your business address. Google will resolve the address automatically. – Use the Zoom slider to control how zoomed in the map starts — for a single business location, a zoom level of around 14 to 16 works well so visitors can see the nearby streets – Use the Height slider to control how tall the map appears on the page — 400px is a comfortable default for most contact pages, but you can go taller if the map is the main feature of the section At this stage, your map should be live and interactive on the canvas. Double-check that the pin is dropping on the correct location. If the address is very new or in a remote area, you may need to use the full street address including postcode or ZIP code for accuracy.
Step 5: Style the Map with CSS Filters
One of the small but nice touches you can add is a hover effect on the map. Elementor lets you apply CSS filters to the map widget — things like contrast, brightness, saturation, blur, and hue — and you can set different values for the normal state and the hover state. A popular effect is to display the map slightly desaturated or lower-contrast by default, then have it pop to full colour when a visitor hovers over it: – Click the Style tab in the left panel – Click the pencil icon next to CSS Filters – Lower the Contrast to around 60 for the default (normal) state – Click Hover at the top of the filters section – Raise the Contrast to around 120 for the hover state This creates a subtle interactive effect that draws attention to the map when users move their mouse over it. It’s a small detail, but it looks polished and professional.
Alternative: Embed Google Maps Without an API Key
If you don’t want to set up a Google Cloud account and API key, there is a simpler but more limited method: embedding a map using Google Maps’ own share/embed feature and pasting the iframe code into an Elementor HTML widget. Here’s how: – Go to maps.google.com and search for your business address – Click the Share button in the left sidebar – Switch to the “Embed a map” tab – Choose your preferred map size and click “Copy HTML” – In Elementor, drag an HTML widget to your page – Paste the copied iframe code into the HTML widget This method works without any API key setup and is perfectly fine for basic use. The trade-off is that you have less control over styling and sizing through Elementor’s interface, and the embed may not respond as cleanly on all screen sizes. For most small local business sites, however, it gets the job done.
Tips for Using Google Maps on Local Business Sites
After setting up maps on hundreds of local business websites, here are a few practical tips worth keeping in mind: – Always place the map on your Contact page, and ideally also in the footer so it appears on every page of the site – Set your zoom level high enough that visitors can see the surrounding streets — a zoom level so broad that only the city is visible is not helpful – Make sure the pin is dropping at the correct door, not just near the building — for businesses in shopping centres or multi-unit buildings, double-check the pin placement – On mobile, the map should be touch-responsive by default, but test it on a real device to make sure – If your business has moved recently, remember that Google Maps data may take some time to update — in the meantime, the address text on your page should be accurate even if the pin is slightly off – Keep the map section visually clean — a simple heading like “Find Us” or “Our Location” above the map, plus your address in text below it, gives visitors everything they need
Common Errors and How to Fix Them
The most frequent issues people run into when setting up the Elementor Google Maps widget are almost all related to the API key. Here’s what to check if your map is showing an error or a grey box instead of a map: – “This page can’t load Google Maps correctly” — this usually means your API key is missing, incorrect, or the Maps Embed API has not been enabled in your Google Cloud project. Go back to your Google Cloud Console, confirm the Maps Embed API is enabled, and re-copy your API key. – Map shows but has an “For development purposes only” watermark — this means billing is not set up in your Google Cloud project. You need to add a billing account even if your usage stays within the free tier. – Map appears in the Elementor editor but not on the live site — clear your site cache and your browser cache, then reload the page. – Incorrect pin location — try entering a more complete address including suburb/city and postcode. If the pin is still wrong, you can look up the exact latitude and longitude coordinates for your business using Google Maps and use those instead of a text address.
Frequently Asked Questions
Is the Elementor Google Maps widget free?
Yes, the Google Maps widget is included in the free version of Elementor — you do not need Elementor Pro. The only requirement is a Google Maps API key, which you can generate for free through Google Cloud Console. For most small business websites, usage stays well within Google’s free monthly tier.
Do I need an API key to add Google Maps in Elementor?
To use Elementor’s built-in Google Maps widget, yes — an API key is required. However, if you prefer to skip the API key setup, you can use the alternative method of copying the embed iframe code from Google Maps and pasting it into an Elementor HTML widget instead.
How do I add my API key to Elementor?
Go to your WordPress Dashboard, navigate to Elementor > Settings > Integrations, and paste your Google Maps API key into the “Google Maps Embed API” field. Click Save Changes and the widget will work across your entire site.
Why is my Elementor Google Map showing a grey box or error?
This is almost always caused by a missing, incorrect, or restricted API key, or because billing has not been set up in your Google Cloud project. Double-check that the Maps Embed API is enabled and that your billing account is active in Google Cloud Console.
Can I add Google Maps to my Elementor contact page without coding?
Absolutely. The Elementor Google Maps widget is a drag-and-drop element — no coding required at all. You just drag it onto your page, type in your business address, and adjust the zoom and height settings. The whole process takes only a few minutes.
Does the Google Maps widget work on mobile in Elementor?
Yes. The embedded map is fully touch-responsive on mobile devices. Visitors can pinch to zoom, pan around the map, and tap to open directions in Google Maps directly from your site. Always test on a real mobile device after setup to confirm it looks and behaves correctly.
Final Thoughts
That’s everything you need to get a beautiful, interactive Google Map up and running on your Elementor website — completely for free. Once you’ve done it once, the whole process from API key to live map takes less than 15 minutes. If you’re a visual learner and want to see every step done in real time, make sure you watch my YouTube video tutorial where I walk through the entire setup on a live site. It’s linked at the top of this page. Got a question, or stuck on a particular step? Drop it in the comments below — I read every one. And if you’d like me to set this up for you as part of a full website build or a quick fix, feel free to reach out to me directly through the contact page. I’m always happy to help.
I hope that this article on How to use Free WordPress Elementor Google Maps Widget will help you. Read more articles on Elementor Tutorials.
Do not forget to subscribe to our Quick Tips YouTube Channel for upcoming videos on Website Design, WordPress Tutorials, Elementor, and WooCommerce tutorials.
