Google Maps Widget

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.


Content

  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

Style

  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.

Advanced

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.

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page