Gmaper is a WordPress plugin to add extended Google maps 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.
The plugin includes many useful features to cover most of your needs when creating your own location block. You can create the required number of markers by specifying the longitude and latitude, use a custom image as a marker, add title and description, customize its display styles according to the requirements. With the legends, the Gmaper provides more information, explanation for your visitors about the location, or map interpretation. Manage various map display options via simple toggles like Map type, Street view, Zoom controls, Show legend, Overlay and many others. Moreover, you can specify the type of map and select one of the available display styles or use a custom one using JSON code.
Color schemes fo G MapsFull flexibility of Google MapsIncludes Templates for ElementorCrafted for Elementor BuilderSuitable for all kind of Layouts and TemplatesCompletely Cross-Browser SupportPerfect for Popular Elementor Themes
We made sure that it was easy for you to get started with the Gmaper plugin. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.
The plugin has straightforward and flexible style settings. You can set the base map configuration, overlay, typography, colors, background, border, and other things for different elements. It is possible to apply various styles for different item states like normal or hover.
Gmaper for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Gmaper plugin for Elementor
Supports auto-detection of user location
Using longitude and latitude to specify a location
Supports four types of maps: Road map, Satellite, Terrain, Hybrid
Includes map legends
Multiple markers for one map
A lot of map options display settings
Ability to create unlimited Maps
6 Predefined map display styles
Support custom map style
Responsive and friendly to any device
Customizable fonts, colors, borders, backgrounds, etc.
Responsiveness settings
Works well with all WordPress themes built on Elementor
Totally Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
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:
The option allows you to auto-detect the user location and display it as a central location.
Latitude and longitude of central map 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.
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.
A map example with almost all map settings enabled
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.
Legend settings of the Gmaper
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.
Marker settings of the Gmaper
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
Standard map style
SILVER
Silver map style
RETRO
Retro map style
DARK
Dark map style
NIGHT
Night map style
AUBERGINE
Aubergine map style
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.