Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How To Use The Advanced Google Map Widget By Element Pack Pro

In this documentation, we will discuss the customization of the Advanced Google Map widget, brought to you by the Element Pack Pro addon.

Set The Google Map API Key

Set The Google Map API Key

First Go to the Element Pack Pro Plugin dashboard > API Settings > Generate the API > Paste The Google Map API key on the Google Map API key Box then hit the Save Settings button.

If you didn’t know How to Generate the Google Map API key then you can see the video of How to Generate the Google Map API key that helps you properly to Generate the Google Map API key.

Inserting The Advanced Google Map widget

Inserting The Advanced Google Map widget

On the page in Elementor editor, search by the widget’s name and then drag-drop it on the page.

Content tab customizations

Google Map Section

Go to Content > Google Map

Come to the Google Map section, Find the Zoom Control, Default Zoom, Street View Control, Map Type Control, Map Height, Show List, List Position ( Left, Right ), Search Address, Placeholder Text, and Alignment options.

Marker Section

Go to Content > Marker

Step-1

Marker Section

Here, you can add the Marker item (with the Add Item button).

Step-2

Click on Each item, you will find two sub-section; Content and Marker.

In the Content Mode, Find the Latitude, Longitude, Title, Place, Content, Phone, and Website options.

Step-3

In the Marker mode, find the Custom Marker, and Image options.

Style tab customizations

GMap Style Section

Go to Style > GMap Style

Step-1

Here you also find two sub-section; Normal and Hover.

In the Normal Mode, Find the Style Json Code, CSS Filters, Border Type, and Border Radius options.

Step-2

In the Hover mode, you will get the CSS Filter option as in the Normal Mode.

Search Section

Go to Style > Search

Search Section

Find the Background Color, Text Color, Placeholder Color, Box Shadow, Border Type, Border Radius, Padding, and Typography options.

Map List Section

Go to Style > Map List

Step-1

Come to the Map List Section, you will find three sub-section; Title, Place, and Image.

In the Title mode, find the Background Type, Background Color, Separator Color, Separator Height, Title Color, and Typography options.

Step-2

In the Place mode, find the Place Color, and Typography options.

Step-3

If you select an image as Background then you will get the Image Size, Position, Attachment, Repeat, Display Size, Separator Color, Separator Height, and Border Radius options.

Tooltip Section

Go to Style > Tooltip

Step-1

Come to the Tooltip section, you will find Four sub-section; Title, Place, Content, and Link.

In the Title Mode, Find the Tooltip Width, Image Width, Title Color, Spacing, and Typography options.

Step-2

In the Place Mode, Find the Place Color, Spacing, and Typography options.

Step-3

In the Content Mode, Find the Content Color, Spacing, and Typography options.

Step-4

In the Link mode, Find the Link Color, and Typography options.

All done! You have successfully customized the Advanced Google Map widget on your website.

Video Assist

You can watch the quick video to learn about the Advanced Google Map widget. Please visit the demo page for examples.

Thanks for being with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge