How to Add Google Maps in Elementor, Integrate Google Maps API Easily 2026

In the Elementor editor, add a new section or container to hold the map, choosing between a Flexbox or Grid layout depending on how you want it to sit alongside other content on the page. From the Widgets panel, search for Google Maps and drag it into the container. Elementor's free widget set includes Google Maps by default, so there's nothing to install beyond Elementor itself.

With the widget selected, the Content tab shows a Location field — type an address like "123 Main Street, New York, NY" and Elementor centers the map there automatically using its address search, no coordinates needed. Below that, the Zoom slider controls how close the initial view is, and Height sets the map's pixel height on the page; a zoom around 10-14 and a height of 250-400px covers most contact-page use cases. The map preview updates live in the editor as you adjust either value, so you can dial in exactly how much surrounding area shows before publishing.

The Style tab gives you Normal and Hover states along with a CSS Filters control, which lets you adjust things like saturation, brightness, and contrast on the map itself rather than just the container around it — useful if your site uses a muted or monochrome look and a full-color Google map clashes with it. This is a lighter styling toolkit than most Elementor widgets get, since Google's own map tiles limit how much you can restyle beyond filters, but it's enough to tone a map down so it doesn't visually fight with the rest of the page.

For the large majority of sites, the widget works exactly as shown above with no API key at all — Elementor's default Google Maps embed handles it. An API key only becomes necessary in a smaller set of cases: heavy traffic that exceeds Google's free embed limits, or a map that simply refuses to render for reasons tied to your specific Google account or region. Don't go hunting for a Google Cloud Platform account before you've actually tried the plain widget — it's an unnecessary detour for most setups.

If the map genuinely comes up blank after trying the steps above, the fix lives in Elementor's own settings rather than anywhere on the page itself: go to Elementor → Settings in your WordPress admin, open the Integrations tab, and find the Google Maps section there. That's where a generated API key gets pasted in. Getting the key itself means signing up for a Google Cloud Platform account and enabling the relevant Maps API for your project — a separate, one-time setup on Google's side that's worth doing only once you've confirmed the plain embed genuinely isn't working for you.

Before concluding you need a key, rule out the simpler causes: an incorrectly typed address that Elementor's search couldn't resolve, a Height value left at zero, or a caching plugin serving a stale version of the page from before the widget was added. Reload the published page in a private browser window to bypass cache, and try a well-known address like a city name to confirm the widget itself is functioning before troubleshooting further.