Jquery and Clickable Maps

I have intergrated jquery with the clickable USA maps for one of the site I developed - In a normal situation using clickable maps is simpler, but I had a very specific requirement that I had to display the same map on 3 jquery tabs (function of jquery ui) with only difference being that the urls changed in each maps.

On click of the tabs the maps were getting loaded but the url remained the same for reasons unknows. I had to really struggle a lot on fixing this. Finally found a way to make this work - on clicking of the tabs, I added my jquery code to clear the entire dom under that div so that the jquery loads the maps freshly with the right href attributes. This worked like a charm on most of the modern browsers though I am yet to test it in older browser (really wondering if we need to make our application compliant to those IE6 etc)

I had spent quite a number of days figuring this out, so just thought it could be useful to somebody out there! The implementation can be checked at and you see the Jobs by State and Jobs by Region section there.

Author: pradeep