Add a Google map without using iframes or code knowledge. It provides an easy and fast process for creating unlimited markers, legends, map styles, and customizing other settings. The map widget can enhance any type of site, be it a blog of travelers visiting places around the world, a business company with multiple locations, or a real estate agency showing key features of the area.
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>Gmaper 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 Element 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
The Content section has all the basic Google map settings like coordinates, markers, legends, display options, etc.
Center location
Specify the coordinates of the central location on the map. Read how to get your place coordinates.
Latitude
Specify the latitude of the center map location.
Longitude
Specify the longitude of the center map location.
User location
The option allows you to auto-detect the user location and display it as a central location.
Map settings
- Map type – select one of the available map types: Road map, Satellite, Terrain, Hybrid.
- Zoom – set the map zoom which will be displayed for visitors by default.
- Overlay – the toggle to enable/disable overlay layer for the map box which can be customized in different styles on the Style tab.
- Scroll wheel zoom – the toggle to enable/disable the ability to zoom the map using a wheel.
- Info container always opened – the option allows you to keep always open the block with additional information about the location.
- Info container open on hover – the option allows you to open on hover the block with additional information about the location.
- Info container close – the option allows you to choose how to close the tooltip for markers: Default, Click on another marker, Click on map.
- Zoom controls – the toggle to enable/disable the display of zoom buttons on the map.
- Full screen control – the toggle to enable/disable the display of the fullscreen mode button on the map.
- Disable map drag – the toggle to enable/disable the ability to drag the map.
- Show legend – the option allows you to display the legend on the map.
- Map type control – the toggle to enable/disable the map type control buttons on the map.
- Street view control – the toggle to enable/disable the street view button on the map.
- Hide logo – the toggle to enable/disable the Google logo in the bottom left corner of the map.
- Hide copyright – the toggle to enable/disable the Google copyright in the bottom right corner of the map.
- Hide terms of use – the toggle to enable/disable the Google term of use in the bottom right corner of the map.
- Hide report a map error – the toggle to enable/disable the Google Report of problem in the bottom right corner of the map.
- Hide keyboard shortcuts – the toggle to enable/disable the keyboard shortcuts in the bottom right corner of the map.
Legend
A section for adding the required number of legends for the map box.
To add a new legend, click “Add Item” and fill or edit all the fields.
- Title – a field to enter the title of the legend section.
- Legend Image – select an image from the media library for a new item.
- Icon size – specify the icon/image size of the item.
- Title – a field to enter the title of the item.
Marker
A section for adding the required number of markers for the map box.
To add a new marker, click “Add Item” and fill or edit all the fields.
- Choose Image – select an image from the media library for a new item.
- Rectangular image – an option allows using rectangular images. When it is disabled the image will be square.
- Custom marker size – specify the icon/image size of the item.
- latitude – specify the latitude of the marker.
- longitude – specify the longitude of the marker.
- Title – a field to enter the title of the item.
- Description – a text area to enter the description of the item.
Map styles
Select one of the available map styles or use the JSON code for your custom style.
Standard
Silver
Retro
Dark
Night
Aubergine
Custom
Enter your Json code to change the map style.
Style tab
On the style tab, you can manage the Google Map, marker, and legend styles like colors, size, typography, borders, padding/margin, etc.
Map
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Height – specify the height of the map box.
- Width – specify the width of the map box.
NORMAL/HOVER
The map style settings for different states.
- 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.
Overlay
- Color – specify the color and opacity for the map overlay using the color picker.
- Blend Mode – select one of the available blend modes.
Marker title/Marker description/Legend title
- Margin – the setting allows managing the margin of the current element in different units(px, %) 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.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The text style settings for different states.
- Color – specify the font color and opacity for the text of the current block 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 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.
Legend
- Margin – the setting allows managing the margin of the current element in different units(px, %) 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 current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER
The legend 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 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.
Legend items
- Margin – the setting allows managing the margin of the current element in different units(px, %) 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.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The item style settings for different states.
- Color – specify the font color and opacity for the text of the current block 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 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.