Media · Elementor
Google Maps widget for Elementor
A map with marker and style controls for a location or directions block.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A map with marker and style controls for a location or directions block.
render() writes HTML data attributes: data-controls, data-locations, data-settings.
Maps need a Google Maps API key; the widget prints a map container that JS initializes.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Google Maps”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Map Type”, “Color Scheme”, “Custom Style”, “Map Height”. Style and Content tabs are listed on this page.
When to use it
- A contact page.
- A store locator teaser.
- An event venue.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Select Map Type | Written to the `type` HTML attribute in render(). Options: Road Map; Satellite; Hybrid; Terrain. |
| General — Color Scheme | The chosen value is read in render() and applied on the front end. Options: Default; Blue Essence; Blue Water; Golden Brown; Light Grayscale; Light Silver; Midnight Commander; Mostly Green…. |
| General — Custom Style | Get custom map style code from Snazzy Maps or GM Styling Wizard and copy/paste in this field. |
| General — Map Height | Writes CSS `height` onto the widget’s front-end markup. (min 100, max 1000). |
| General — Zoom Depth | Spacing/size control (min 1, max 20). |
| General — Disable Zoom on Scroll | Switcher inspector control (`gm_zoom_on_scroll`). |
| General — Cluster Markers | Combine markers in close proximity into clusters to simplify the display of markers on the map. |
| google_map_locations — Latitude | Text inspector control (`gm_latitude`). |
| google_map_locations — Longitude | Text inspector control (`gm_longitude`). |
| google_map_locations — Show Info Window | Options: None; on Load; on Click. |
| google_map_locations — Location Title | Text inspector control (`gm_location_title`). |
| google_map_locations — Location Description | Textarea inspector control (`gm_location_description`). |
| google_map_locations — Info Window Width | Spacing/size control (min 50, max 500). |
| google_map_locations — Marker Animation | Options: None; Drop; Bounce. |
| google_map_locations — Use Custom Marker | Switcher inspector control (`gm_custom_marker`). |
| google_map_locations — Upload Marker Icon | Media Library attachment(s); render() uses the URL/ID as the image source. |
| google_map_locations — Marker Icon Size Width | Spacing/size control (min 10, max 150). |
| google_map_locations — Marker Icon Size Height | Spacing/size control (min 10, max 150). |
| Locations — Google Map Locations | Repeater rows; render() loops each item to build the list or slides. |
| Controls — Show Map Type Control | Written to the `type` HTML attribute in render(). |
| Controls — Show FullScreen Control | Switcher inspector control (`gm_controls_fullscreen`). |
| Controls — Show Zoom Control | Switcher inspector control (`gm_controls_zoom`). |
| Controls — Show Street View Control | Switcher inspector control (`gm_controls_street_view`). |
| Info Window — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right; Justified. |
| Info Window — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Info Window — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Info Window — Background Color | Writes CSS (background-color, gm-style-iw-t, background, gm-style-iw-tc) onto the widget’s front-end markup. |
| Info Window — Title Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-google-map .gm-style-iw-c .king-addons-gm-iwindow h3`. |
| Info Window — Description Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-google-map .gm-style-iw-c .king-addons-gm-iwindow p`. |
| Info Window — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Info Window — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Info Window — Distance from Marker | Writes CSS `transform` onto the widget’s front-end markup. (min 0, max 30). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Why is Google Maps blank?
The map JS needs a valid Google Maps API key. The Elementor preview can look empty until the key is set and you view the front end.
How do I add Google Maps in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Google Maps”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Image Hotspots
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Advanced Image Gallery
A gallery of images and optional videos from the Media Library or a manual list, with lightbox.
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Accordion
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Google Maps after you activate it.