01
Clinic contact page map
Type the clinic address into Location, set Zoom to 15 and take the height and border radius from your site's radius Variable. This Elementor contact page map zooms with the + and − buttons or by dragging.
Atomic Element · Free
Elementor Google Maps Widget: a contact map, no API key
Add Elementor 4 Google maps to a contact page with a free Elementor Google Maps widget. Type the address and the map appears, live on the canvas. Switch to satellite, set the label language, round the corners and add a grayscale filter from the Style tab.
- Native Elementor 4 Atomic Element
- No API key required
- Roadmap or satellite
- Label language and region
The short answer
What is the Elementor Google Maps widget?
The Google Maps widget is an Elementor 4 Atomic Element from Animation Addons that embeds a Google map placed by address. It has Location, Zoom, Map Type, Language and Region controls, reuses the API key in Elementor's settings and falls back to a keyless embed when there is none.
Also searched as: elementor google maps widget, elementor google maps without api key, free elementor google map, elementor google map embed, elementor 4 google maps, elementor v4 google maps, atomic google maps widget, elementor google map satellite, elementor google map not showing, elementor google map grayscale, elementor google maps language, elementor google maps hover effect, elementor contact page map, elementor google maps zoom, elementor map widget
This free Elementor Google map shows one place per map. It does not do multiple markers, custom map colour themes or routes. For several locations, use one map per branch; for a different look, use filters such as grayscale.
Key factsAnimation Addons 4.3
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (single element) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Controls | Location, Zoom (1–20), Map Type (Roadmap / Satellite), Language, Region, ID |
| API key | Optional; read from Elementor > Settings > Integrations |
| Default size | Full width, 300px tall; change both in the Style tab |
| Loading | Lazy-loaded iframe; no JavaScript of its own |
| Styling | Height, width, radius, border and filters (normal and hover) from the Style tab, per breakpoint |
| Limits | One place per map; Google's own map styling (no custom colour themes); the map loads from Google when it nears the screen, with no click-to-load step |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Six ways to use the Google Maps.
Ideas you can build today with the Google Maps and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
02
Grayscale boutique map that warms on hover
Add a grayscale filter to the Style tab's normal state and remove it in the hover state; the element's default 300ms transition eases the change. Move the pointer over the map to see the colour return.
03Pro
Satellite view of a wedding estate
Set Map Type to Satellite and Zoom to 16, then give the map a portrait height and a thin border. The slide-in needs the Regular Animation extension (Pro). Zoom or drag to look around the grounds.
04
Three-branch bakery locator
Place one Google Maps element per card in an Elementor 4 Grid, set Zoom to 14 and share one map Class for height and radius.
05
Hotel map in two languages
Set Language to en on one page and ar on its translation, or leave it empty to follow each visitor's browser, and set Region to the country code. Press EN or the Arabic switch to see the street labels change.
06
Dark footer map for a night venue
Add a grayscale filter and set the opacity to 60% in the Style tab so the black footer shows through, set the height to 220px and Zoom to 16. Drag the strip or use the zoom buttons.
Features
What you get with the Google Maps.
Every option below is a real control in the Google Maps panel or part of how the element renders. Nothing here needs custom code.
Place a map by address
Type any address or place name into Location. The map centres on it with Google's marker; no coordinates needed.
Live on the canvas as you type
This Elementor map widget re-renders as you edit, using the same markup as the published page.
Works with or without an API key
With a key in Elementor > Settings > Integrations, the widget uses Google's official Embed API. Without one, it falls back to the keyless maps.google.com embed, so the Elementor Google map embed still shows.
Roadmap or satellite
For an Elementor Google map satellite view, Map Type switches between Roadmap and Satellite, the two types Google's embed supports.
Label language and region
The Elementor Google Maps language comes from Language, a two-letter code such as en, bn or ar; leave it empty to follow each visitor's browser. Region sets a two-letter country code, which changes how Google names places and draws disputed borders.
Style the frame like any element
Height, width, radius and border come from the Style tab. Filters work on normal and hover states, so an Elementor Google Maps hover effect, such as grayscale that turns to colour, needs no code. The default 300ms transition eases between them.
Built on the atomic base
How the Google Maps widget is built
Why it mattersEach part is a real Elementor 4 element you can select in the Navigator and style on its own, with your Classes and Variables.
- Google Mapssingle atomic element: Location, Zoom, Map Type, Language, Region
- Map frameGoogle embed iframe, fills the element
- Empty-state messageeditor only, while Location is empty
Step by step
How to add a Google map in Elementor 4
Six steps with the atomic Google Maps widget, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Try it freeInstall and activate Animation Addons for Elementor, then open a page with the Atomic Editor turned on.
Optional: add a Google Maps API key in Elementor > Settings > Integrations. Skip this to use the keyless embed.
Drag Google Maps from the Animation Addons Atomic Elements onto the canvas.
Type the address in Location and set Zoom (14 to 16 suits a business address).
Choose Map Type, and set Language and Region if needed.
Set height, radius and any filter in the Style tab, check mobile, then publish.
Honest comparison
Classic Google Maps vs this atomic widget
Elementor's free classic Google Maps widget does the core job well: one location, zoom, height and filters. Choose the atomic Google Maps widget for Elementor 4 styling and map type, language and region controls.
| Feature | Elementor Google Maps (classic) | Animation Addons Google Maps |
|---|---|---|
| Element type | Classic v3 widget | Native Elementor 4 Atomic Element |
| Requires Elementor Pro | No | No |
| Locations per map | One | One |
| Zoom and height | Yes | Yes, height per breakpoint in the Style tab |
| Filters, normal and hover | Yes | Yes, in the Style tab |
| Classes and Variables | No | Yes |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
Who uses the Google Maps?
The people who get the most out of it, and what they use it for.
Agencies
Adding consistent contact maps across client sites.
Local businesses
Adding an Elementor contact page map for their shop, clinic or office.
Venues and real estate
Using satellite view for grounds.
FAQ
Questions about the Google Maps
Can I use Elementor Google Maps without API key?
Yes. The Animation Addons Google Maps widget works without a key by falling back to the keyless maps.google.com embed. If you add an API key in Elementor > Settings > Integrations, the widget switches to Google's official Embed API with that key automatically. Both show an interactive map placed by your address.
Why is my Elementor Google map not showing?
First check Location: with no address, the editor shows only an "Enter a location" message. Then check the API key in Elementor > Settings > Integrations; an invalid or restricted key can block the official embed, and removing it lets the keyless embed take over. Finally, make sure the Animation Addons Google Maps element has a height in the Style tab.
How do I make a grayscale Google map in Elementor?
Select the Animation Addons Google Maps widget, open the Style tab and add a grayscale filter for an Elementor Google map grayscale look. To bring colour back on hover, switch to the hover state and remove the filter; the default 300ms transition eases the change. Google's embed does not allow custom colour themes, so filters are the way to restyle it.
Is there a Google Maps widget for Elementor V4?
Yes. The Animation Addons Google Maps widget is an Elementor V4 Google Maps element built as a native Atomic Element, so it works with the Atomic Editor, Classes and Variables. It runs on Elementor Free, needs no Pro licence and does not need a Google API key.
How do I set the Elementor Google Maps zoom?
Type your address in Location, then set Zoom between 1 and 20. For a business address 14 to 16 works well. The Elementor Google Maps zoom control sets the opening view only; visitors can still zoom in and out with the buttons on the map or with touch gestures.
Can I add multiple markers to one Elementor map?
Not with this widget. The Animation Addons Google Maps widget uses Google's embed, which shows one place per map. For several locations, place one map per branch in a grid of cards, which is often clearer for visitors anyway. Multi-marker maps need Google's JavaScript Maps API, which this widget does not use.
Is an embedded Google map GDPR-friendly?
The Animation Addons Google Maps widget loads Google's map iframe when it nears the screen, so the visitor's browser contacts Google at that point; there is no built-in click-to-load step. If your consent policy requires one, use a consent plugin that blocks iframes until approval, or show a static image linking to Google Maps instead. Check with your own legal adviser.
Does the Google map slow my page or work on phones?
The Animation Addons Google Maps widget adds no JavaScript of its own and only a tiny stylesheet; the iframe loads lazily, so the top of the page stays fast. On phones the map fills the width, and you set a shorter height per breakpoint in the Style tab. Panning and zooming are Google's own touch gestures.
Is the map accessible to screen readers and Google?
The Animation Addons Google Maps widget gives the map iframe a title and label taken from the address, so screen readers announce what it shows. Search engines do not read map content, so also write the address as plain text next to the map, for example with an Icon List, and keep your Google Business Profile up to date.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Related Atomic Elements
Elements that work well with the Google Maps on the same page or template.
Animation Addons Pro · Elementor 4
Put your location on the page in seconds
Free on Elementor Free. No API key required to start.
Halloween deal40% off every Pro planEnds 5 Nov
- 15-day money-back guarantee
- Rated 4.6 / 5 on WordPress.org
- No Elementor Pro needed
- Elementor 3 & 4 in one license