Trying to Make States Active On Click for jQuery Map

[sakina]

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>

[StepinSolutions]

You can try the JS from following map which is free to download. http://jqvmap.com/

Keep me posted if it worked or not. If not, i can try couple of solutions.


-Pratik