In the video below you can find some instructions on how to use the plugin. English it’s not my first language, so I’m sorry if I make mistakes, but hopefully the video will be helpful. You can see more videos here.
How to create a Map
1 – Give your map a title and description
The title is important, since it will be the way you’ll identify your map. It will display in your ‘Manage Maps’ page and might also display to your users, before the map loads. The description is not mandatory, but you can add more information about your map there.
2 – Select the Region to Display
Select the what map you want to display. This could be a World Map, a subcontinent map or a country focused map. Take in consideration that when using a country focused map, if you want the state/regions/provinces borders to display, you should choose the correspondent option (Country Name – Provinces).
3 – Select the Display Mode
This is where you’ll choose what type of interactive elements the map will have:
- Regions
If you want to colour countries or regions, this is the display mode you need to select. - Round Markers
If you want to add markers to the map, to pinpoint specific locations, select this option. - Text Labels
Similar option to the Round Markers, but instead of having round markers on a location, you can have text.
Below the ‘Map Settings’ options, you’ll find some instructions on how to use the display mode selected. Please read these instructions, as they provide important information.
4 – Active Region Action – What to do when user clicks
This option will allow you to select what will happen when the users click the regions or markers. The options range from simple interactions, like open a link or more advanced like opening content in a lightbox. When you select an option, below the ‘Map Settings’ options, you’ll find instructions on how to use the action selected.
5 – Hover options – Tooltip and Region Hover Effect
In these options you can choose if the tooltip will display when the interactive regions are hovered and how it will display: when the user clicks or when the user hovers. Consider that when the ‘display on hover’ option is enabled, the tooltip will follow the mouse movements. When the ‘display on click’ option is enabled, the tooltip will display in a fixed location, in the center of the region clicked.
The option to ‘Enable Region Hover Effect’ refers to a small hover effect that enhances the borders of the regions that are being hovered.
6 – Interactive Regions
Before adding your interactive regions, make sure to read the instructions that display above. The way you add interactive regions will depend on what options you have chosen in the ‘Map Settings’ options above.
- Region Code
This will depend on what display mode and region to display you have chosen. Read the instructions on screen to know what kind of region codes you need to add. Usually it will be either a ISO region/country code in regions mode or coordinates for Markers and Text Labels mode. - Title
This will be the first line of the Tooltip - Tooltip
This will be the tooltip content - Action Value
Depending on what you have selected in the ‘Active Region Action’, the content of this field will be used for different purposes. If you select the option to open a new page, for example, here you should place the URL you want to open. If you selected an option to display content, here is where you would place the content. HTML is allowed. - Color
Region or Marker Color.
7 – Visual Settings
Here is where you find the basic options that will allow you to control the overall aspect of your map.
- Background Color
This will be the background colour of your map. It will basically be the sea/oceans colour. You can use the word ‘transparent’ if you don’t want to have a colour. - Border Color
This will be the color of the border of the map. Consider that the border width option must be bigger than zero. The box border where the map is contained and not the country borders. To manipulate the country borders you’ll need to use the option available in the ‘Custom CSS Generator’, available below the map preview. - Border Width
Box border width. The default is 0, so no border will display. - Inactive Region Color
Colour for the Inactive regions. When using the regions display mode, the regions that don’t have data will have this color. If you’re using markers mode, the region you selected to display will have this color. - Marker Size
When using Markers mode or Text Labels mode, this will control the size of the round circles or the size of the text. - Width & Height
If the responsive mode is enabled, these settings will be ignored, but if the responsive mode is disabled, here you can control the fixed size the map will have.
8 – Save Your Map
Once you add the regions and finish to select the options you want, you should save your map. Notice that after a map is created, above the map options, there will be a message with the SHORTCODE that you can use to display the map. Shortcode is a simple code that you can copy and paste to the place where you want the map to display.
9 – Add it to a page or post
Once you have copied the shortcode, you just need to add it to the place where you want the map to display. This could be a post, page or even a text widget. If you’re using a page builder, you can add the shortcode to a text component for example. Consider that if the responsive mode is enabled in the settings (default) the map will take the amount of space that is available. If you want the map to be bigger add it to a bigger container or if you want it to be smaller, add it to a smaller container, for example, in a page builder, in a narrower column.
10 – Advanced Visual Customization and Other Features
If the visual options are not enough, you can also explore the ‘Custom CSS Generator’ options below the map preview. Here you’ll find options that are not directly supported by the Google Geochart API, which the map uses to generate the maps, but you can still achieve with custom CSS. Here you’ll find options to manipulate the viewport, set a hover colour, regions border colours and even customize the tooltip further.
Examples on other more advanced features can be found in the ‘How To’ parent page.