The free version of Elementor provides you with a basic Google Maps widget, but if you want to customize the map further, use the Advanced Maps Elementor widget by Stratum. It’s also free but gives you access to way more tools integrated from the official Google Maps services.
All you need to get started is to obtain your Google Maps API key:
To use the API key associated with your project on your Elementor WordPress website, go to WordPress dashboard > Stratum > Settings > API > Google Maps API key > insert your key.
The Purpose of the Advanced Posts Elementor Widget
This maps Elementor widget is perfect for showcasing your business address/addresses on an interactive Google map on any page, without a need to integrate third-party plugins.
Unlike a native Elementor widget for adding a Google map, you can customize the widget by Stratum employing the following features:
- Display unlimited locations on the map using custom markers (marker clustering).
- Adjust a default map interface with regard to user interaction (zoom, fullscreen, etc.).
- Choose a theme map style to be a better match for your Elementor WordPress theme design.
General Features & Settings of the Google Maps Elementor Widget
You can use single or multiple markers on your map.
Interaction controls: Zoom and pan (dragging) settings
Select the preferable way users will interact with your Google map:
- Enable zooming and panning
- Completely disable zooming and panning (dragging is allowed but the map stays of the same scale)
- Prevent unintentional zooming while scrolling a page.
You can also set up a default zoom level:
Map marker settings
It’s easy to add unlimited markers and customize their appearance:
- Marker title
- Marker longitude and latitude
- Optional description
- The pop-up window width.
- Street view
- Map type (allow users to toggle between the street and satellite views)
- Zoom controls
- Fullscreen (allow users to enter the fullscreen mode).
Remember that the default behavior is that all the map interaction controls disappear if the map is viewed on small devices (200x200px).
Note: Map styling can be used to prevent businesses, public transit icons or other points of interest from appearing on the map.
You can select the theme source and choose the preferable map styling:
- Google Standard
- Custom (add your CSS styles)
Heading over to Styles, you can configure the default map height. Using the Advanced Elementor styling settings, it’s easy to apply more motion effects, change backgrounds, adjust the spacing and configure other common styling Elementor settings.
Stratum Free Elementor Widgets: Download the Google Maps Elementor Widget
If you want to create a more tailored look for Google Maps on WordPress, this Google Maps widget for Elementor can be your go-to solution.
Feel free to get the Advanced Google Maps Elementor widget along with other awesome ones by downloading Stratum widgets for Elementor:
If you are also working with the Gutenberg WordPress block editor, make sure to check out Getwid – our huge collection of free Gutenberg blocks.