Which Plugins Are Compatible With Custom JS?

Custom JS scripting is currently supported by all the single-level premium plugins like the US map, World Map, and so on.

You will find plenty of examples of JS codes on Fla-shop.com’s site which you can use to enhance the functionality of your interactive maps.

Here is an example showing how it is done: 

Example – Highlighting A State When It Is Clicked

By default, the plugin allows you to configure 2 colors for each state – default color and hover color. How about a third color – selected color? This can be easily added with some custom JS code.

Let’s consider this short JS snippet

var selected = null;
 
map.on('click', function(ev, sid, map) {
    var was_selected = !!selected;
    if (selected && selected != sid) {
        map.stateHighlightOff(selected);
        selected = null;
    }
    var link = map.fetchStateAttr(sid, 'link');
    if (link === '#info') {
        if (sid !== selected)
            map.stateHighlightOn(sid, '#FF0000', '#FFFFFF');
        selected = sid;
    }
    if (!selected && was_selected) {
        jQuery('#'+containerId).parent().find('.usaHtml5MapStateInfo').html('');
    }
});

What Does This Code Do?

This code is programmed to highlight states in your map when a user clicks on it.

How To Use The Code?

There is a dedicated option under the tools tab of your Fla-shop.com interactive map settings panel where you can insert custom JavaScript.

Just enter your JS code and click save and it’s done. It is so easy that any novice can do it. Furthermore, you don’t necessarily have to know JS to use this functionality.

How To Change The Color Of The Highlighted State?

Notice the red arrow in the image below. It points to the HEX code used to specify the colors of the selected state. You can change the HEX code of any color you want to use in your interactive map.

In case, you don’t know the HEX code of the color you are looking for, simply Google, “hex code of [color name]” and you will get it. 

How To Use This Code For Interactive Maps Of Other Countries?

The provided JS snippet is for the Fla-shop.com US Interactive Map. If you want to use it for an interactive Map of another country, say Canada, then you need to tweak the code.

Search for the line

jQuery('#'+containerId).parent().find('.usaHtml5MapStateInfo').html('');

Locate the string: ‘usaHtml5MapStateInfo‘
Change it to – ‘canadaHtml5MapStateInfo‘
Similarly, if you want to use the code for the Map of India, use ‘indiaHtml5MapStateInfo‘.

Calling All Developers

As you can see, Fla-shop.com interactive maps promise a lot of potential. They can host an array of features and functionalities based on custom JS scripts. If you are a developer with a new idea/functionality to add to the interactive maps, then we welcome your contribution. In return for your ingenuity, we promise to give you a free license to our premium plugin. 

In Conclusion

So this is how you can use custom JS codes to add extra features and functionalities to Fla-shop.com interactive maps. And even if you don’t have coding knowledge yourself, you can always use many of examples custom JS codes as shown in the article.

Get a try-for-free customizable US map for WordPress

Enhancing capabilities of Map plugins for WordPress

Our plugins are well-acclaimed for their extremely simple interface, so even a novice WordPress user can easily configure and embed an interactive map on his or her WordPress website. All settings are visual and do not require any coding. Settings cover colors, tooltips, adding points, grouping countries into regions, and other possibilities.

In the post ‘5 Features of the US Map for WordPress Plugin,’ you can find some examples of map interaction that even a complete rookie can implement.
At the same time, our maps have JavaScript API, so experienced developers can implement complex and non-standard usage scenarios for plugins. And now this gets even simpler thanks to the custom JavaScript code field already added into the plugin settings.

The following update refers to the following products: US Map for WP, World countries Map for WP, as well as all single-level map plugins.

How custom JavaScript works

Custom JavaScript code is executed when the map is drawn for the first time. Any further redraws of the map do not trigger the execution. However, if you have multiple instances of the map on the same page, each one will execute its own custom JS code.

In the script, you can use any JS code, such as: executing standard or custom functions, reading and writing values of variables, parsing the HTML document, and whatever else. In addition, in the script you have access to the following variables:

map – an instance of the map that provides access to public methods of the map class. This includes callback handlers that allow you to perform certain actions in response to certain events (see below).

You can find the complete list of methods available to you here.

containerId – this variable holds the HTML id of the container the map is placed to.

Example:

</p>
 map.on('click', function (event, sid, map) {
    var name = map.fetchStateAttr(sid, 'name');
    console.log('Clicked state is: ' + name);
 });
<p>

How to add custom JavaScript to the map

Open map settings and switch to the ‘Tools’ tab. Scroll down to the Custom JavaScript section:

You can insert custom JavaScript code in the corresponding textbox. Click the ‘Save Changes’ button.

Here is what the above example code does. It fetches the name of the state on the map that a user has clicked and prints that name to the console.

What can you do with custom JavaScript?

Since you have access to most of the map object methods as well as to the HTML of the page, you can do almost anything. Let’s review some basic functions provided by the map object:

Callback functions

By using the FlaMap.on method you can assign a callback function to certain events including: on click, on double click, on mouse move, on mouse in, on mouse out, on mouse button down, and on mouse button up.
The callback function receives the original event that triggered the callback; the state id corresponding to the event (for example, if the event is a click, the function receives the id of the clicked state); the map object.

Map state manipulation

The map object provides a number of ways to view or modify various state settings: name, color, label, is a state is shown or hidden and is a state is enabled or not. You can also modify the URL assigned to a specific state.

Points manipulation

Map points are used to mark various objects on the map: headquarters, dealership network sites, local offices, and so on. Using custom JavaScript, you can track clicks on points, as well as change their parameters: label, color, size, coordinates, and assigned URL.

Map drawing and overall appearance

You can adjust the general settings of the map and initiate redrawing using the map.reloadMap() method.

Please refer to the documentation on the complete list and description of FlaMap methods.

Examples of use

Auto-fill forms

A map combined with a form can simplify filling in the data for a user.
For example, if a form has such fields as State or Country, then normally a user would have to manually type or select these values from the dropdown. With a map enhanced with custom JS code, you can simplify this down to just one click on the map.

What you need is to write a callback function and pass it to the FlaMap.on method. In the callback function, you fetch the name of the clicked state/country and insert the corresponding state/country values into the form.

Select multiple states

If you need to give your visitor the possibility to select multiple states, using custom JavaScript can help. We have reviewed a similar example for non-WordPress maps here: https://www.fla-shop.com/howto/interacting-with-maps-via-checkboxes/

Tracking clicks on states in Google Analytics

A common use case of our map plugins is displaying a dealership map for a given country or state. When a state or a country is clicked on the map, the corresponding contact information displays side-by-side with the map. And now, if you want to know how often this or that state or country is clicked and see this info in Google Analytics, you can use custom JavaScript to integrate the map to GA and therefore see the map click data.

Specifically, you need to invoke Google Analytics scripts (analytics.js, gtag.js, etc) from your custom JS code.

Conclusion

As you see, custom JavaScript added to the interactive map can greatly enhance its basic functionality. Enjoy!

Try United States map for WordPress for free