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:

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

score 2 · Answer 1 · answered Feb 01 '13 at 16:57

2

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'}
},

answered Feb 01 '13 at 16:57

Shane

1,629
3
23
50

Also, I was able to add jQuery to the function. For example a click on Nevada can allow for new content in the same page. You can also add /#url1 and so forth. Just look at your mapping file for the naming conventions of code or data. – Shane Feb 02 '13 at 04:38

score 2 · Answer 2 · answered Sep 25 '11 at 06:30

2

Maybe doing this would work:

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

answered Sep 25 '11 at 06:30

Rusty Fausak

7,355
1
27
38

I am sure thats a step in the right direction by using (event,code) but I have no clue how to get it working. Basically I want ALL US States to got a URL. I was hoping if I can figure out how to do one I could add links for all. Each state goes to is own url. – Drew Sep 25 '11 at 07:00
How about changing `window.location ..` to `alert(code)` so you can figure out what you want to do with it? – Rusty Fausak Sep 25 '11 at 07:03
The problem is ...im really noob. I dont understand how to correctly to do this. All I know is that right now it can show the info in the div when you click the region. Instead of showing it on a div in the same page I want to click on go to url. I can implement what I see and have searched the web. but when it comes to writing the syntax I dont know how to do it from scratch. I am assuming the concept is along these line: function showmyinfo(event,code){ case 'pa': window.location = 'pa_page.php?code=' + code; break; – Drew Sep 25 '11 at 07:13
I mean you can literally paste my `onRegionClick` into your code and change the single line `window.location ..` inside it to `alert(code)`. – Rusty Fausak Sep 25 '11 at 07:23
im sorry, i have no idea how that helps. I searched these links for any other help but I cant figure this out. http://stackoverflow.com/questions/3669050/change-window-location-jquery http://stackoverflow.com/questions/2685958/window-location-call-popup-up-empty-dialog-on-safari – Drew Sep 25 '11 at 07:33

score 0 · Answer 3 · edited Jun 13 '12 at 22:35

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

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

3 Answers3