How do I add OnClick function that goes to a page link (url) with javascript/jquery

Question

Ok I am using the fantastic map plugin found here:

http://jvectormap.owl-hollow.net/#maps

I am a noob ... can't figure out how to implement the parameter mentioned in the "reference" part on the documention which states you can use "onRegionClick".

Can anyone tell me how to implement this so that when I click on a region ( A State on the US Map ) it goes to a URL?

If this helps at all, my current working example shows the info I want on the page using the Parameter I want, but only in a div (div is called #location ) on the existing page. I would like it to got to a url instead.

<script>
$(function(){
    $('#main').vectorMap({
        map: 'usa_en',
        color: '#aaaaaa',
        hoverColor: false,
        hoverOpacity: 0.5,
        colors: {pa:'#F00, ny:'#F00, },
        backgroundColor: 'false',
        onRegionClick: showmyinfo       
    });
});

function showmyinfo(event,label){
    switch (label)
    {
        case 'pa':
            $('#location').html('<h3>PA Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Havertown, PA 19083</li></ul>');
            break;
        case 'ny':
            $('#location').html('<h3>NY Locations:</h3><ul><li>Location 1</li><li>123 This Street</li><li>Brooklyn, NY 11249</li></ul>');
            break;
    }
}
</script>

Any help greatly appreciated

Answer 1

I found this to work for me.

onRegionClick: function(event, code){
                        if (code == "US-AZ") {window.location = '/url1'}
                        if (code == "US-TX") {window.location = '/url2'}
                        if (code == "US-CA") {window.location = '/url3'}
                        if (code == "US-NV") {window.location = '/url4'}
                        if (code == "US-LA") {window.location = '/url5'}
},

Answer 2

Maybe doing this would work:

$(function(){
    $('#main').vectorMap({
        ..
        onRegionClick: function (event, code) {
            window.location = 'page.php?code=' + code;
        }
    });
});

Answer 3

i just had the same problem. but i found a solution:

$(document).ready (function() {
$('#map').vectorMap( {
    map: 'germany_en',
    backgroundColor: 'red',
    hoverColor: 'black',
    onRegionClick: function(event, code) {
        if (code === 'th') {
            window.location = 'index.php?id=2'
        }
        else if (code === 'mv') {
            window.location = 'index.php?id=3'
        }
        else if (code === 'rp') {
            window.location = 'index.php?id=4'
        }
    }
});
});

now you can create a separate url for every region (identified by its code).

the form "index.php?id=2" comes from TYPO3, so you should adapt it to what you're using...

greetings