Want to Make States Active On Click for jQuery Map

Hello,

I am making a jQuery map for a client who has offices in many states. Right now, when I click on a state, the text at the bottom remains until I click on another state, but I would like for the state to keep the color red after I click it. It will be fine if states I hover over keep the same color, I just want to make sure the active state that the user clicks on is able to stand out.

Can someone please help me learn how to do this? I am new to Javascript so please bear with me if this is a stupid question. Thank you in advance for your help!

Here is my code thusfar:


<div id="map" style="width: 500px; height: 500px;"></div>
<div id="notif" style="width: 500px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/raphael.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>

<script>
	$(document).ready(function() {
		$('#map').usmap({
			stateSpecificStyles: {
				'AL': {fill: 'yellow'},
				'MS': {fill: 'yellow'},
				'GA': {fill: 'yellow'},
				'FL': {fill: 'yellow'},
				'TN': {fill: 'yellow'},
				'SC': {fill: 'yellow'},
				'NC': {fill: 'yellow'},
				'VA': {fill: 'yellow'}			},
			stateSpecificHoverStyles: {
				'AL': {fill: 'red'},
				'MS': {fill: 'red'},
				'GA': {fill: 'red'},
				'FL': {fill: 'red'},
				'TN': {fill: 'red'},
				'SC': {fill: 'red'},
				'NC': {fill: 'red'},
				'VA': {fill: 'red'}
	},
			click: myCallback
		});
	});


	function myCallback(event, data)
	{
		if ('AL' == data.name) // this text for Alabama
		{
			$('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>');
		}
		else if ('VA' == data.name) // text for Virginia
		{
			$('#notif').html('Virginia is under the cursor!');
		}
		else if ('GA' == data.name) // text for Georgia
		{
			$('#notif').html('Georgia is under the cursor!');
		}
		else if ('TN' == data.name) // text for Tennessee
		{
			$('#notif').html('Tennessee is under the cursor!');
		}
	}
</script>

Hi there,

And welcome to the forums.

It took a while, but I found an answer to your problem.
What you need to do is to alter the code in the file “jquery.usmap.js” (you also need to be hosting it locally to do this).

At about line 256 in this file (latest version), you’ll find the following code:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
}

You need to add the following line before the final curly brace:

this.stateShapes[state].node.setAttribute("id", state);

The code should now should read:

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
  this.stateShapes[state].node.setAttribute("id", state);
}

What this does, is give every state on the map its own id which corresponds to the id used in the state specific styles (Alabama has id =“AL”, California has id=“CA” etc.)

Now in your click handler you can write:

$("#map > svg > path").each(function(){
  $(this).css('fill', '');
});
$('#' + data.name).css('fill', 'pink');

The first bit gets a reference to all of the states on the map and removes the fill property from all of them.
This is so that only one state can be highlighted at once.
The second bit changes the colour of the state that was just selected.

I’ve made a simple demo showing what I mean here: http://hibbard.eu/blog/pages/us-map/example/

I hope this helps you.

P.S. I can’t take credit for the first part of this. I found a big hint on the project’s issue tracker on GitHub: https://github.com/NewSignature/us-map/issues/3

P.P.S. If you want me to send you over the files, just PM me.

Again, thank you so much for all of your help! I am still a little confused as to how I would add the click handler to the code I have in place. Would I place it before the myCallback?

Hey there,

No problem!

You currently have this:

function myCallback(event, data)
  {
  if ('AL' == data.name) // this text for Alabama
  {
    $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>');
  }
    else if ('VA' == data.name) // text for Virginia
  {
    $('#notif').html('Virginia is under the cursor!');
  }
    else if ('GA' == data.name) // text for Georgia
  {
    $('#notif').html('Georgia is under the cursor!');
  }
    else if ('TN' == data.name) // text for Tennessee
  {
    $('#notif').html('Tennessee is under the cursor!');
  }
}

change it to this:

function myCallback(event, data)
  {
  if ('AL' == data.name) // this text for Alabama
  {
    $('#notif').html('<div style="width: 200px; height: 250px; background-color: #0D937B; color: #fff; font-size: 22px; font-weight: bold;" class="rounded-corners"><span style="align: center; padding-top: 10px;">This is example text</span></div>');
  }
    else if ('VA' == data.name) // text for Virginia
  {
    $('#notif').html('Virginia is under the cursor!');
  }
    else if ('GA' == data.name) // text for Georgia
  {
    $('#notif').html('Georgia is under the cursor!');
  }
    else if ('TN' == data.name) // text for Tennessee
  {
    $('#notif').html('Tennessee is under the cursor!');
  }

  $("#map > svg > path").each(function(i){
    $(this).css('fill', '');
  });
  $('#' + data.name).css('fill', 'pink');
}

This will only work if you have altered the “jquery.usmap.js” file.

HTH

For some reason this is not making the state remain pink after it is selected. It works exactly the same as before I added the code.

Is there any reason you can think of that this code would be working properly with your map and not mine? Could there be something overriding that section?

I have made all of the changes you have suggested exactly.

Thank you again for taking so much time from your busy schedule to help me solve this issue.

Hi there,

Is it possible to post a link to a page where I can see this?
I’m sure it’ll be something simple.

It can be found at http://alabamaseo.org/map

Hi there,

The problem is that you are still linking to the jquery.usmap.js file on GitHub.

<script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>

You need to download this file, alter it as I describe in my first post, then upload it to your own server.

Does that make sense?

Hi, this worked great on everything except IE8? I even checked your example and it doesn’t work in IE8. Would you be able to point me in the right direction on how to get it to work in ie8?

Hi,

Welcome to the forums :slight_smile:

It seems that the line that is causing IE to balk is this:

$('#' + data.name).css('fill', 'pink');

Support for SVG in IE8 and below is patchy.
TBH I don’t think you’re going to have much luck, but you could try Googling “SVG fill attribute polyfill” or something similar.

Good luck!

Hi,

After posting the above, it occurred to me that the Raphael library (on which this is based) actually has its own fill method.

So, aftersome experimentation, I found out that instead of doing this:

$('#' + data.name).css('fill', 'pink');

you could do this:

data.hitArea.attr({'fill': 'yellow'});

which should then work in IE8, right?

Wrong!

The problem I then encountered is that even though the above command, successfully fills the state with the appropriate colour, the plugin uses the opacity property to produce that nice hover effect.

Ok then, so we need to do this:

data.hitArea.attr({'fill': 'yellow', 'opacity': 1.0});

Now that works in Chrome and all other sensible browsers, but unfortunately, IE8 still refused to play ball (due to the way that it implements opacity).

So, I had a look at the plugin and altered the line where the opacity is specified originally:

this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});

became:

this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, 'cursor': 'pointer'});

Now things started to kind of work in a cross browser way. IE8 started cooperating, but the map turns black and we lose our state-specific highlighting.

I then spent far too long playing around with applying classes and removing them and, and, and …

In the end the best I could come up with was this IE8 demo, which probably isn’t much use as the states remain highlighted once you have clicked on them.

I’ve spent several hours on this now and I really don’t think you’re going to get this to work. Sorry :frowning:

Wow, thank you so much for all your help. This map was for a project I needed to get done by end of day today. After hours of looking into html image mappers and the above, I just did the most obvious:

My map has four regions: west, midwest, southeast, and northeast. I manipulated the coordinates to get it this way. Overall the plugin works, the only part that wasn’t working is keeping the hover color when it was clicked. I only have four regions, so what was the easiest thing to do???

Create five maps for IE8 and below, and leave the single map for everything else.

For IE8, I created a map for the default view and another four maps with the ‘selected’ region filled to the hover color.

The default map is displayed first and the other maps are display:none; On click, ONLY FOR IE8 AND BELOW, the map will hide the current view, and display the map with the section color filled to the hover color. To the user, the experience is the same as the regular map, except in reality it’s five maps which are hidden and shown depending on click. I know, I know, it’s sloppy and redundant code, but I was low on time and just needed it to work. Here’s the code:

$(document).ready(function() {
	  $('#map').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#1D5E75',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#006B3B',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#A49A00',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#DCA728',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				
				$("#map > svg > path").each(function(){
				  $(this).css('fill', '');
				});
				$('#' + data.name).css('fill', '#e1ebe5');
						   $("#southeastpanel").toggleClass("openmapui");					
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
				$("#map > svg > path").each(function(){
					  $(this).css('fill', '');
					});
					$('#' + data.name).css('fill', '#EDDEBD');
						   $("#northeastpanel").toggleClass("openmapui");						
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				
					$("#map > svg > path").each(function(){
					  $(this).css('fill', '');
					});
					$('#' + data.name).css('fill', '#edebcc');	
						   $("#midwestpanel").toggleClass("openmapui");						
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});
				
				$("#map > svg > path").each(function(){
				  $(this).css('fill', '');
				});
				$('#' + data.name).css('fill', '#e1ebf4');	
			$("#westpanel").toggleClass("openmapui");					
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	  
	  $('#mapie').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#1D5E75',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#006B3B',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#A49A00',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#DCA728',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiese').show();				
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
						$('#mapie').hide();
						$('#mapiese').hide();
						$('#mapiewest').hide();
						$('#mapiemw').hide();

						$('#mapiene').show();			
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiese').hide();

				$('#mapiemw').show();				
									
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiese').hide();
				$('#mapiemw').hide();

				$('#mapiewest').show();
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	  
	  $('#mapiewest').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#e1ebf4',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#006B3B',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#A49A00',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#DCA728',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiese').show();			
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
				$('#mapie').hide();
				$('#mapiese').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiene').show();					
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiese').hide();

				$('#mapiemw').show();
									
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});		
					
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	  
	  $('#mapiese').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#1D5E75',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#e1ebe5',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#A49A00',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#DCA728',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				
								
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
			$('#mapie').hide();
			$('#mapiese').hide();
			$('#mapiewest').hide();
			$('#mapiemw').hide();

			$('#mapiene').show();									
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiese').hide();

				$('#mapiemw').show();				
									
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiese').hide();
				$('#mapiemw').hide();

				$('#mapiewest').show();				
								
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	  
	  $('#mapiemw').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#1D5E75',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#006B3B',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#edebcc',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#DCA728',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiese').show();
								
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
				$('#mapie').hide();
				$('#mapiese').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiene').show();									
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				
										
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiese').hide();
				$('#mapiemw').hide();

				$('#mapiewest').show();				
								
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	 
	 $('#mapiene').usmap({
	  	  showLabels: false,
	  'stateSpecificHoverStyles': {
	  	  'WEST' : {fill: '#e1ebf4', stroke: '#fff'},
		  'SOUTHEAST' : {fill: '#e1ebe5', stroke: '#fff'},
		  'MIDWEST' : {fill: '#edebcc', stroke: '#fff'},
		  'NORTHEAST' : {fill: '#EDDEBD', stroke: '#fff'}
	  },
	    'stateSpecificStyles': {
	      
		  'WEST' : {fill: '#1D5E75',
		  stroke:'#ffffff'},
		  'SOUTHEAST' : {fill: '#006B3B',
		  stroke:'#ffffff'},
		  'MIDWEST' : {fill: '#A49A00',
		  stroke:'#ffffff'},
		  'NORTHEAST' : {fill: '#EDDEBD',
		  stroke:'#ffffff'}
		  
	    },	    
	    'mouseoverState': {
	      'HI' : function(event, data) {
	        //return false;
	      }
		  
	    },
		
		 'clickState': {
			'SOUTHEAST' : function(event, data) {
				$(".accordion").accordion({active:2});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiemw').hide();

				$('#mapiese').show();				
			},
			
			'NORTHEAST' : function(event, data) {
				$(".accordion").accordion({active:3});
									
			},
			
			'MIDWEST' : function(event, data) {
				$(".accordion").accordion({active:1});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiewest').hide();
				$('#mapiese').hide();

				$('#mapiemw').show();
										
			},

			'WEST' : function(event, data) {
				$(".accordion").accordion({active:0});
				$('#mapie').hide();
				$('#mapiene').hide();
				$('#mapiese').hide();
				$('#mapiemw').hide();

				$('#mapiewest').show();				
							
			}			
		  },
		  
	    
	    'click' : function(event, data) {
	      $('#alert')
	        .text('Click '+data.name+' on map 1')
	        .stop()
	        .css('backgroundColor', '#ff0')
	        .animate({backgroundColor: '#ddd'}, 1000);
	    }
	  });
	  
	  

	});

Inline:

<!--[if lt IE 9]>
<div class="" id="mapie">
<div class="maptext">Click on a territory for contacts</div>
</div>

<div class="" id="mapiene" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>

<div class="" id="mapiewest" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>

<div class="" id="mapiese" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>

<div class="" id="mapiemw" style="display:none;">
<div class="maptext">Click on a territory for contacts</div>
</div>
<![endif]-->


<!--[if lt IE 9]>
<script type="text/javascript"> 
$(function() { 
$('#map').hide();
var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; 
$( "#accordion" ).accordion({ icons: icons, header:"h3", active:3, collapsible:true, }); 
$( "#toggle" ).button().click(function() { if ( $( "#accordion" ).accordion( "option", "icons" ) ) { 
$( "#accordion" ).accordion( "option", "icons", null ); } else { 
$( "#accordion" ).accordion( "option", "icons", icons ); } }); 
$("#southeastpanel").click(function() { if(!$('#southeastpanel').hasClass("ui-state-active")){ } else{ 

$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();

$('#mapiese').show();
} }); 
$("#northeastpanel").click(function() { if(!$('#northeastpanel').hasClass("ui-state-active")){ } else{ 
$('#mapie').hide();
$('#mapiese').hide();
$('#mapiewest').hide();
$('#mapiemw').hide();

$('#mapiene').show();
} }); 
$("#westpanel").click(function() { if(!$('#westpanel').hasClass("ui-state-active")){ } else{ 
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiese').hide();
$('#mapiemw').hide();

$('#mapiewest').show();
} }); 
$("#midwestpanel").click(function() { if(!$('#midwestpanel').hasClass("ui-state-active")){ } else{ 
$('#mapie').hide();
$('#mapiene').hide();
$('#mapiewest').hide();
$('#mapiese').hide();

$('#mapiemw').show();
} }); }); 
</script> 
<![endif]-->


Oh and by the way, my map is connected to a jquery ui accordion. When the map is clicked, each corresponding accordion for each region is activated.

IE8 I HATE YOU!!!

Yeah, that’s weird because IE8 is otherwise such a standards compliant browser (not), but at least you found a solution that works for you.
Thanks for taking the time to share it with us.

Hi there, I am attempting to use the map in a similar way as you are with 4 regions. Could you share the coordinates you used to draw the four different regions? Thanks so much!