All of these features are included in the US Map WordPress plugin from Fla-shop.com. In this article, we’ll show you how to create a rep locator map for your WordPress website with just a few clicks.

How to Create a Representative Locator Map for WordPress

Creating a rep locator map may seem complicated, but with our interactive map plugin, you can significantly accelerate the process.

First, think about the concept of your future map. What information do you want to provide? How will you display it? What color scheme will you use? Do you need to add any internal sources of information to your map?

Once you’ve answered these questions, you can easily create your Rep Locator Map on your WordPress website with the user-friendly US Map WordPress plugin from Fla-shop.com.

After installing and activating the plugin, follow these steps to create a colorful rep locator map:

1. Go to your WordPress Dashboard (you’ll need administrative access to configure the plugins).
2. Open the “USA Map” menu on the left side of the screen.
3. Go to the “Maps” page and enter a name for your map. The settings menu for your map will then appear at the top of the dashboard.
4. If you want to apply the same settings to several states, group them into a region. Go to the “Group settings” tab and customize the settings (i.e., color, tooltip information) for the new region.
5. Preview the map in the “Preview” tab to check all changes.
6. Copy and paste the shortcode from the “Preview” tab into your WordPress blog post or a single page.

For your convenience, we’ve prepared a short 3-minute video that illustrates the creation process of a rep locator map:

Useful Features of WordPress Plugins for Creating Representative Maps

Interactive maps from Fla-shop.com are created with the latest modern technologies, which means you don’t have to worry about inconveniencing website visitors. Our interactive maps are:

• Easily customizable
• No coding required
• Import/export settings via CSV
• Easy embedding into WordPress pages
• Mobile-friendly

All of these features improve the quality and usability of your corporate website. In addition to creating customized maps to showcase your business locations and data, you can also use them to create sales territory maps for your team.

Conclusion

Creating a rep locator map on your WordPress-powered website has never been easier! The US Map plugin is a powerful tool that will significantly increase the effectiveness of your website and attract more visitors. For additional information, please visit the plugin homepage:

Try the United States map for WordPress for free

To create a map like this, load, install, and activate using the standard instructions found here: US Map plugin for WordPress (Admin Panel→ ‘Plugins’ → ‘Add Plugins’ → ‘Upload Plugin’ → choose the archive with the plugin→ ‘Install Now’ → ‘Activate Plugin’).
In the left menu of the WordPress dashboard, the ‘USA Map’ section will appear. Choose ‘Point Settings’ to manage the points. To add a marker or a location, double click anywhere on the map, this will bring settings window; I; the ‘Name’ field enter the point’s name; configure its type, size, color, position, and action after the click; add info to the ‘Tooltip’; click ‘Apply’.

In the above example, added points are not the company’s physical locations; they represent the company’s dealer network that is scattered throughout the United States. Let’s agree that this is impressive, however, if points are placed as densely as in our example, you will face a new problem. When you hover the cursor on a state, you will notice that the tooltip for the state starts “blinking” (continuously appearing and disappearing).

To fix this issue, it is necessary to make points invisible to the cursor.

How to add a user-defined CSS class for a point

The US map for WordPress plugin allows you to add a user-defined CSS class for each point. This feature is used to manage the ‘hover state’ for points. Appointing a unique CSS class to a point is possible while creating or editing it. The edit menu can be brought up by double-clicking any point on a map in the ‘Point settings’ tab. To assign the CSS class, put its name in the appropriate field, and click the button ‘Apply’.
This, for instance, is how it looks adding the no-event class to Point 1 in edit mode:

After adding the CSS class to all points, it is necessary to add to a style file the theme properties of this class:

.no-event {pointer-events: none;}

This can be accomplished via a Customizer, via an internal theme editor, or an FTP.

Modifying a Style File with the Help of a Customizer

To add user-defined CSS via a customizer, navigate to the visual settings mode of the site (Admin panel → ‘Appearance’ → ‘Customize’); select ‘Additional CSS’; then paste the property of the class to the text box.

How to Modify Stylesheet with the Help of Theme Editor

To complete this operation via theme editor, open in the left menu of the admin panel ‘Appearance’ tab and go to the ‘Theme Editor’ tab. From the right list select ‘Stylesheet’ and paste at the bottom of the file the following strings:

.no-event {
 pointer-events: none;
 }

Click ‘Update file’.

How to Modify CSS File via FTP

To modify files via FTP, establish a connection with a server and open theme style file for editing. It may be located in the root theme directory or the style folder (frequently named style, CSS, etc.). Paste strings with a class name and its properties at the bottom of the style table. Save the file.

That’s all! Refresh the page and check the result. Don’t see the changes? Probably, your browser is picking up cache data. Press Ctrl+F5 in Windows, or Command+R in Mac, to reload the page. If this doesn’t help, clear the cache in all of the caching plugins and the browser settings.
You can read details about the properties of the ‘pointer-events’ on developer.mozilla.org.

How to Quickly Add a Class for a Set of Points

If you have added a couple of hundred points, then assigning a CSS class for each of them via the interface of the plugin could be a daunting task. There is a bulk edit option using the export and import of a CSV file with plugin settings which allows you to edit all of the points quickly.
Use tools on the ‘Tools’ tab to export map settings to a CSV file.

We suggest using the Google Sheets online editor to work with CSV files. In the formed spreadsheet, add the CSS class names in the ‘class’ column.

Save the edited file and use ‘Tools’ to import the settings back to the site.
Before editing the CSV file, we suggest to fully backup the map settings. To do so, on the ‘Maps Dashboard’ tab, select all the maps and export them to a JSON file.

Conclusion

Fla-shop.com plugins for WordPress are a nice addition to a website. You can create an interactive infographic, sales territory maps, office location maps, etc. All of the options are available through a visual interface and do not require any coding. Also, for advanced web developers, useful instruments are available: the ability to use classes, adding custom JS codes, etc.

Get try-for-free customizable US map for WordPress

A. Make a copy of the configured map

1. Login to the admin dashboard of the site. On the left menu, open ‘World Map’ section and then ‘Maps’ subsection.
2. Select a map (let’s just call it ‘Map #1’) from the list to which it is required to add an additional language.
3. Press ‘Export’ button. Locate a place to save a JSON file of the ‘Map #1’ on the hard drive of the computer and press the ‘Save’ button.

4. Press the ‘Import’ button. Select the JSON file that was saved in the previous step. Press the ‘Open’ button. After importing the JSON file Copy of the ‘Map #1’ (let’s call it ‘Map #2’) will appear in the list of the map on the ‘Maps’ page. Rename it to avoid errors in further configurations.

B. Import to the CMS the map with a required language

Download a ZIP-archive file of JSON file with a required language (in our example, it is Spanish). Extract the archive. Click the ‘Import’ button on the subsection ‘Maps’ of the ‘World Map’ section on the admin panel of the site. Select the JSON file from extracted ZIP-archive and press the ‘Open’ button. After the file is uploaded on the ‘Maps’ page, there will appear another map (in our case – ‘Mapa del mundo’). Let’s call it ‘Map #3’.

C. Export the CSV file Map #2 and #3 for editing

1. Navigate to subsection ‘Tools’ of the ‘World Map’ section on the left hand sidebar of the admin panel of the site.
2. In the dropdown list ‘Select a map’ select ‘Map #2’.
3. In the dropdown list ‘Field delimiter’ select the delimiter ‘semicolon’.
4. Press the button ‘Export to CSV file’. Specify a location on the HDD of your PC to save the CSV file. Press the ‘Save’ button.

5. In the dropdown list ‘Select a map’ select ‘Map #3’ (in our example – ‘Mapa del mundo’).
6. In the dropdown list ‘Field delimiter’ select the delimiter ‘semicolon’.
7. Press the button ‘Export to CSV file’. Specify a location on the HDD of your PC to save the CSV file. Press the ‘Save’ button.

D. Edit saved CSV files

It is possible to the CSV file using online editor Google Sheets, OpenOffice Calc or Microsoft Excel software. We recommend using Google Sheets.

Editing the CSV files in Google Sheets

1. On the browser, open homepage of Google Sheets. Create a new table.

2. Click ‘Import’ on the ‘File’ menu.

3. Open the ‘Upload’ tab and then press ‘Select a file from your device’. Select the CSV file that was exported from ‘Map #3’ from your computer. Press the ‘Open’ button.

4. Select ‘No’ from ‘Convert text to numbers, dates, and formulas’ on the ‘Import file’ tab. Press the button ‘Import data’.

5. Select the column ‘name’ and copy its contents to the clipboard.

6. Repeating the previous steps, open the CSV file ‘Map #2’. Select the column name and paste the data from the clipboard. In the ‘Download’ section of the ‘File’ menu click ‘Comma-separated values (.CSV, current sheet)’.

7. Save the edited CSV file to your computer.

Editing the CSV files in OpenOffice Calc

1. Run OpenOffice Calc application. Click Open from the File menu.

2. From the drop-down list Character Set select Unicode (UTF-8). Click the OK button.

3. Select the column name and copy its contents to the clipboard

4. Repeating the previous three steps and open the CSV file ‘Map #2’. Select the column ‘name’ and paste the data from the clipboard.
5. Save the edited CSV file to the HDD of your computer.

E. Import to the site edited ‘Map #2’ file

1. Navigate to the ‘Tools’ section of the sWorld Maps on the menu of the admin panel of the site.
2. Choose ‘Select a map’ from the drop-down list ‘Map #2’.
3. Select the ‘semicolon’ from the ‘Field Delimiter’ list.
4. Press ‘Import from CSV file’ button.

5. Select edited CSV file ‘Map #2’ from the HDD of the PC. Click the Open button.

Navigate to the World Map section on the admin panel of the site. From the drop-down list ‘Select a map’ choose ‘Map #2’. Open the ‘Preview’ tab. If all the operations were accomplished successfully, then you will see the configured map of the world with the names of countries in the language you need.

Delete ‘Map #3’. To do so, navigate to the ‘Maps’ page of the ‘World Map’ sections and click ‘Delete’, which is located on the same level as the name of the map that will be deleted.

Thus, to add an additional language to the map of the world created on a multilingual site with the help of the Interactive HTML5 World Map plugin for WordPress, it is necessary to create a copy of the main map – ‘Map #2’. Then, download a ZIP archive with the JSON file with the required language and import it to the site, creating ‘Map #3’. After that, edit ‘Map #2’, by changing the contents of the column ‘name’ to the column ‘name’ from CSV ‘file Map #3’ and import the edited ‘Map #3’ file.

Via the described method, it is possible to change not only the language but also other information on the map – links, colors, images.

How to use this option?

By default, the shortcode for the map looks like this

[usahtml5map id="0"‍]

You can add a “select” attribute for example

[usahtml5map id="0" select="st11"]

“st11” is an identifier of a state or country that determines that this state or country will be highlighted on a map. By default, this will be highlighted in red.

If you want to use your own colors, then you can use any HEX colors, for example

[usahtml5map id="0" select="st11,#00ff00,#ff0000"]

In the example:

st11 - state ID
#00ff00- default color
#ff0000- hover color

If you need to highlight several states at once, you can list the states’ id separated by commas

[usahtml5map id="0" select="st11,st20,#00ff00,#ff0000"]

How to find out the state identifier?

On the tab “Detailed settings” you can find the ID for each state. The following screenshot shows where you can find it.

Also, you can export to CSV in the Tools tab and find the ID for all states at once.
We recommend using Open Office Calc to open CSV files.

Feedback from our customer who uses this option

For the website the thefulcrum.eu we use the Europe map on the homepage and the same map on each country page. On the homepage, every country is white and has its own color on hover. (For example, Germany is green on hover). On each separate country page, we wanted the country in question to be highlighted in the relevant color (In the case of Germany: green) without having to make a separate map for each country.
By using the default shortcode for the map and adding the identifier for the country and the relevant HEX color on each separate country page this was very easy.
So by using this great option, it saved us a lot of work and we were able to easily create one beautiful map with its own unique character on lots of different pages.

Conclusion

In this post, we described in detail a simple solution for highlighting states in the US Map for WordPress plugin using a parameter in the shortcode.

Try U.S. map for WordPress for free

For the purpose of this read, we have put together a step-by-step guide on how to change the font styles of an interactive map. So without further ado, let’s get started:

How to use fonts already included in WP theme?

Now, if you are looking forward to changing the font style of the interactive maps to match the typography of your site, then it would be best to use the fonts that come with the WP theme you are using.

To use any system font or font that is already used in the WordPress template, simply paste the font name in the appropriate field.

1. Font-family for names on the map
2. Font-family for pop-up names
3. Font-family for text inside the tooltip

And just by following these three simple steps, you will be able to change the font style on your interactive map. But what if you don’t want to limit yourself to only using the fonts included with your WP theme?

Well, Fla-shop.com interactive maps help you use Google Fonts as well.

How to use any of Google Fonts in the map? Step-by-step instruction.

If you want to use any of the Google fonts that are not used in your WP site, then below will be step by step instructions.
To connect Google fonts, you can use any of the plugins, for example, Easy Google Fonts https://wordpress.org/plugins/easy-google-fonts/
Install and activate this plugin.

Below are the steps how to connect any font to the map.

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Step 6.

1. Open the “General settings” tab
2. Font-family for names on the map
3. Font-family for pop-up names
4. Font-family for text inside the tooltip

Result. Map with customized fonts

Conclusion

As you can see, it is extremely easy to customize the font used by the interactive maps from Fla-shop.com. You get all the options, from using the fonts that come with your WP theme, to using different Google Fonts, the options are immense. This can really help you to get your entire site’s typography on the same page, and improve the overall user experience.

Get try-for-free customizable US map for WordPress

Short installation guide

Note that you first need to select the plugin at Fla-shop.com and download the ZIP-archive to your local hard drive. After that:

1. Go to your WordPress admin panel;
2. Select the “Plugins” tab, then select “Add new” link;
3. In the appeared window click on “Upload Plugin” button;
4. Click “Browse” button and select ZIP archive with the plugin. Click “Install Now” button;
5. When the plugin has been installed, activate it by clicking the “Activate Plugin” link;
6. Great job! Now you can see a new section in WordPress admin panel, where you can manage all plugin settings.

Step-by-step installation guide

This comprehensive instruction will undoubtedly help you to answer the question “How to install WordPress plugin from Fla-shop.com” and to make it in an easy and accurate way.

Click on the “Upload Plugin” button

When the upload window appears, click on the “Choose file” button

Choose the ZIP archive with the plugin at your local hard drive

When the ZIP file has been downloaded into your website directory, click on the “Install Now” button

Click on the “Activate Plugin” button to activate the plugin.

Installation of the plugin on macOS (iMac, MacBook)

One of the main differences between the macOS and Windows installation process is that compressed files are being unzipped directly after the download process. It means that after downloading the plugin ZIP archive in macOS you will see something like that:

Please note that you will need to compress this folder into a ZIP archive again in order to upload it to the WordPress website correctly. For this purpose follow the instructions on the screenshot below.

Do a Right-click on the folder icon and choose “compress folder”.

As you can see on a screenshot below after the compression process you will have a ready ZIP archive that can be uploaded to a WordPress website.

Installing the full version of the plugin after testing the demo version

If you have tested the demo version of the plugin and purchased a license, we warn you to delete all old plugin files right before the installation process. You can export your settings into the new plugin. We will describe that in the next articles.

Please note that if you still see an “HTML5 Demo” badge after the installation and activation of the full plugin version, you will need to clear the browser cache:

• for Windows users: press CTRL + F5 at “Map preview” page in WordPress admin panel;
• for macOS users: press Command + R at “Map preview” page in WordPress admin panel.

Video guide

For your convenience, we prepared a short video instruction where we show the complete installation process.

What’s next?

When your interactive map is installed, it is time to configure it, as we described earlier. After that, just embed a simple shortcode into your WordPress blog post or page and enjoy an eye-catching interactive map!

Take a look at the examples of interactive maps that demonstrate the plugin’s capabilities.