help center

On this page

Google Maps widget

Last Update: July 18, 2023

The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are located.


  1. Location: Enter the location you wish to display
  2. Zoom: Set the zoom level of the map
  3. Height: Set the height of the map


  1. CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
  2. Transition Duration (only on Hover): Set the amount of time to transition from one filter setting to the other when hovering over the map.


Set the Advanced options that are applicable to this widget

Tip: To remove the gap around the Google Maps widget, and have the map span the full width of the page, change the Section width from Boxed to Full Screen, and set the Columns gap of the Section from Default to No Gap.

Important: In order to use the Elementor Maps Widget, you must first create an API key and place it in Elementor > Settings > Integrations. To learn more, see this article.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article