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

In Google Cloud Console, create a project or pick an existing one, then open APIs & Services > Library and enable the Maps Embed API specifically. That's the API Elementor's widget calls, not the Maps JavaScript API or Places API.

Then go to APIs & Services > Credentials, click + Create Credentials, and choose API key. Google won't hand you a working key until the project has a billing account attached, so add a payment method under Billing if you haven't already.

Back on the Credentials page, edit the new key and add an HTTP referrer restriction limited to your site's domain, so it can't be lifted and used to run up charges against your project elsewhere. Then, in your WordPress admin, go to Elementor > Settings, open the Integrations tab, find the Google Maps Embed API field, and paste the key in. This is the only place it needs to go, not the widget itself and not a theme file.

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.

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 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. With a working key in place from the earlier steps, the preview updates live in the editor as you adjust either value.

The Style tab gives you Normal and Hover states along with a CSS Filters control, letting you adjust saturation, brightness, and contrast on the map tiles themselves, not just the container around them. That matters if your site uses a muted or monochrome look and a full-color Google map clashes with it.

It's a lighter styling toolkit than most Elementor widgets get. Google's own map tiles limit how much you can restyle beyond filters, but it's enough to tone a map down.

A gray box or a "for development purposes only" watermark almost always traces back to the key: missing, mistyped, or sitting on a project without billing enabled. Confirm the key is saved under Elementor > Settings > Integrations, and confirm in Google Cloud Console that the project it belongs to has a billing account attached and the Maps Embed API enabled.

If the key looks right but the map is still blank, check the referrer restriction includes your live domain, not just a staging URL. Once the key side checks out, rule out an unresolved address, a Height value left at zero, or a caching plugin serving an old version of the page. Reload in a private window to bypass cache.