The Interactive Map widget adds an informative colorful interactive map anywhere on your site page. Create unlimited maps for countries, continents or regions. Choose the map display mode that best suits your goals and wishes. With a minimum of effort and time, you can add the necessary data, configure tooltips to demonstrate the necessary information to your visitors in a creative and clear way.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Once you install and activate the plugin, go to Elementor>Mapper for Elementor>Google Maps API Key and enter your own API key. How to get the key read in the documentation.
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Interactive Map widget such as display mode and type, tooltips content, region, resolution and a lot of other things.
Map settings
Region to display
Leave this field blank to display a map of the whole world. To display a map of a continent, sub-continent or country, use the appropriate code.
Resolution
Select the map resolution from the list.
Countries – displays a map divided by countries.
Provinces – displays provinces and regions of specific countries. Supported only for country regions and US state regions. Not supported for all countries, please test a country to see whether this option is supported.
Metros – supports for the US country region and US state regions only.
Display mode
Three map display modes are available:
- Regions – allows you to highlight specific continents, sub-continents, countries or regions with separate colors and add tooltips with custom content. When this option is enabled, the Regions additional section appears with advanced settings.
- Markers – allows you to set the required marker types for specific continents, sub-continents, countries or regions and add tooltips with custom content. When this option is enabled, the Markers additional section appears with advanced settings.
- Text – allows you to add the text for specific continents, sub-continents, countries or regions. When this option is enabled, the Text additional section appears with advanced settings.
Display type
- Custom – allows you to set custom settings with tooltips for each region separately. Advanced settings appear in the section below depending on the display mode.
- Change colors depending on values – allows you to select a color axis and the regions will be colored according to the specified values. Displaying the legend will help you better understand the data range being used. Advanced settings appear in the section below depending on the display mode.
Tooltip trigger
The following types of triggers are available for displaying tooltips:
- Focus – an option for displaying a tooltip when a region hover.
- Selection – an option for displaying a tooltip when a region is selected.
- None – an option to disable the tooltip display.
Inactive regions color
Select a color for all inactive map regions using the color picker.
Background color
Select a background color for the map using the color picker.
Borders color
Select the color of the regions borders on the map using the color picker.
Overlay
The toggle to enable/disable the map overlay. When the option is enabled, an additional section appears with style settings.
Regions
The section is available when Display mode = Regions. It allows you to highlight specific continents, sub-continents, countries or regions with separate colors and add tooltips with custom content.
Display type: CUSTOM
To add a new element, click “Add Item” and fill all the necessary fields for the region and tooltip.
- Enable link – the toggle to enable/disable the link for the region
- Active region color – specify the color and opacity of the region using the color picker.
- Name – specify the name of the region.
- Region code – specify the region code using the Continent Hierarchy and Codes table.
- Tooltip content – enter content to display in the tooltip.
Display type: Change colors depending on values
The settings allow you to select a color axis to color the regions according to the specified values. Displaying the legend will help you better understand the data range being used.
Enable legend – the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.
- Value title – enter the title of the main value.
- Additional value title – enter the title of the additional value.
- Regions color axis – add the new colors for the axis by clicking “Add Item”
Regions values – add the new regions with numeric values by clicking “Add Item”. The following settings are available when adding the region: Enable link, Region name, Value, Additional value.
Markers
The section is available when Display mode = Markers. It allows you to set the required marker types for specific continents, sub-continents, countries or regions and add tooltips with custom content.
Display type: CUSTOM
To add a new element, click “Add Item” and fill all the necessary fields for the marker and tooltip.
- Enable link – the toggle to enable/disable the link for the marker.
- Icon type – select the icon you want to display as a marker: Default, Icon(from the icons library), Image.
- Marker size – specify the size of the marker using the slider.
- Latitude – specify the latitude of marker location coordinates.
- Longtitude – specify the longtitude of marker location coordinates.
- Title – specify the title of the marker.
- Tooltip content – enter content to display in the tooltip.
Display type: Change colors depending on values
The settings allow you to select a color axis to color the markers according to the specified values. Displaying the legend will help you better understand the data range being used.
Enable legend – the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.
- Value title – enter the title of the main value.
- Additional value title – enter the title of the additional value.
- Marker color axis – add the new colors for the axis by clicking “Add Item”
Marker values – add the new marker with numeric value by clicking “Add Item”. The following settings are available when adding the region: Enable link, Region full name, Value, Additional value.
Text
The section is available when Display mode = Text. It allows you to add the text for specific continents, sub-continents, countries or regions.
Display type: CUSTOM
To add a new element, click “Add Item” and fill all the necessary fields for the text.
- Active region text color – specify the color and opacity of the text for active region using the color picker.
- Region full name – specify the name of the region.
Display type: Change colors depending on values
The settings allow you to select a color axis to color the text according to the specified values. Displaying the legend will help you better understand the data range being used.
Enable legend – the toggle to enable/disable the legend display on the map. Additional legend settings available: color, size, text bold, text italic.
- Region text color axis – add the new colors for the axis by clicking “Add Item”
Region text values – add the new region name with numeric value by clicking “Add Item”. The following settings are available when adding the region: Region name, Value.
Style tab
On the Interactive Map widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Map
- Height – specify the height of the map box using the slider.
- Width – specify the width of the map box using the slider.
NORMAL/HOVER
The map style settings for different states.
- CSS Filters – the option allows you to add various CSS filters for the map box as Blur, Brightness, Contrast, Saturation, Hue.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Tooltip
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Height – specify the height of the tooltip box for different devices using the slider.
- Width – specify the width of the tooltip box for different devices using the slider.
- Tooltip font – select the text font for the tooltip from the list.
- Tooltip font size – specify the font size in the tooltip using the slider.
- Tooltip text bold – the toggle to enable/disable the text bold for the tooltip.
- Tooltip text italic – the toggle to enable/disable the text italic for the tooltip.
NORMAL/HOVER
The style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Tooltip title
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Title align – specify the alignment of the text: Left, Center, Right.
NORMAL/HOVER
The style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Value/Additional value
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Description align – specify the alignment of the text: Left, Center, Right.
NORMAL/HOVER
The style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
