Question

Its a very easy question and I am not web professional. I need to create an Interactive Map. I am using JQVMap. Now I need to click region and it will callback an URL of the state. I am giving and function that was given as example in the site. But I dont know how to setup the link with State and URLs.

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverColor: '#af090f',
        selectedColor: '#0076a3',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        onRegionClick: function(element, code, region)
        {
            var message = 'You clicked "'
                + region 
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
        }
    });
});

Answer 1

The onRegionClick callback contains everything you need to build your dynamic URL. It returns the click event itself, a 2 digit code representing the region you clicked, and the full name of the region you clicked. If you were using the US map for example and clicked on the state of Colorado, you would get back (regionClickEvent,’co’,’Colorado’)

In the first example I built a dynamic url out of the region that was clicked and redirected you there. If the state name or code is not going to be part of the URL, you could do something like the second example where you check what region was clicked and handle it accordingly.

You will need to update the URL to be specific to your needs, but hopefully this gives you and idea.

* * ex.Use the region to build the url on the fly * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml");
    }
})

* * ex.Check the region that was clicked and redirect based on some other rules * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        switch (code) {
        case "co":
            window.location.replace("http://www.google.com");
            break;
        case "ca":
            window.location.replace("http://www.yahoo.com");
            break;
        case "tx":
            window.location.replace("http://www.bing.com");
            break;
            }
        },
    onRegionOver: function (event, code, region) {
       document.body.style.cursor = "pointer";
        },
    onRegionOut: function (element, code, region) {
           document.body.style.cursor = "default";
        }
})

On the updated cursor stuff…if you don’t want to do it on every state, you can do the same check like we do onRegionClick, and check the code and see if it is a state that you want to show that style cursor on.
Or, if there is a state that you don’t want to appear as clickable you could kill the event before it fires like this.

onRegionOver: function (event, code, region) {
     if (code == "tx") 
          event.preventDefault();
     else 
          document.body.style.cursor = "pointer";
},

Anyway, Hope this helps.