[sakina]

Hello,

I am developing landing pages for several clients, and I will need to use a map to show where my clients have offices (most have offices in different states, some have several offices in particular states). I want the states to start off highlighted in a certain color, and when the user scrolls over the state, I'd like for a box (which I can format using HTML/CSS) to display underneath the map. This box will include the address/contact number of each office in the selected state. Can someone please help me learn how to add the HTML box?

Here is my code so far:

<div id="map" style="width: 600px; height: 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'}
			}
		});
	});
</script>

Thanks in advance!