Make the states clickable to a link?

[claustraphobia]

I would really like to use this map, however, I need to be able to have the states click to a link. Instead of spending hours of trying to figure out how to do this myself (already have spent a good time) maybe someone know what code I need to put in? Any help would be really appreciated. I may just go with a simple old image map if I cannot use this.

[kcaran]

There are probably a few ways to do it. I have a list of pdfs in an object:

var state_pdfs = {
    'AL' : 'alabama.pdf',
    'AK' : 'alaska.pdf',
    'AZ' : 'arizona.pdf',
    'AR' : 'arkansas.pdf',
    ...
    'WI' : 'wisconsin.pdf',
    'WY' : 'wyoming.pdf'
 };

Then I use the click event to 'map' the state to the pdf

 $('#us-map').usmap({
    'click' : function(event, data) {
        var pdf = state_pdfs[data.name];
        window.open( '/resources/' + pdf, '_blank' );
    }
});

[claustraphobia]

Hmmm. I am a bit new to jquery but that all makes sense. Not completely sure how i would rewrie that for links. I am thinking i create the var state_links like your pdf but insead of pdf file use the url, but for the click event i guess i am unsure how to rewrite it to open the link? I was going to try it but pretty sure it wont work, so thought id ask. Maybe i just need a click event for each state and not the var state_link ? How would i write that? Appreciate your help!

[claustraphobia]

kcran I tried your code and cannot even get it to work in mine, the map just shows a blank space. Tried it just to see if it works so maybe I could edit it to do what I wanted.

Been playing with this for a while now and finally got a click function to work for a url using $('#map').usmap({ 'click' : function(event, data) { $('MI') document.location.href='listing-category/michigan/'; } });

except any state you click on will go to this url, not for just MI Obviously something isn't right,

[claustraphobia]

AHHHHH finally got it working changing around your code. Appreciate it, I will share here for others who would like to do this aswell:

var state_urls = { 'AL' : 'alabama', 'AK' : 'alaska', 'AZ' : 'arizona', 'AK' : 'arkansas', 'CA' : 'california', 'CO' : 'colorado', 'CT' : 'connecticut', 'DE' : 'delaware', 'FL' : 'florida', 'GA' : 'georgia', 'ID' : 'idaho', }; $('#map').usmap({ 'click' : function(event, data) { var urls = state_urls[data.name]; window.open( '/listing-category/' + urls, '_self' ); } });