I made some progress and got the pop up window working, I cant figure out how to target a specific state though. Right now no matter which state is clicked, the same pop up window opens, I need each state to open a different window. This seems like something that should be really easy but if you can't tell just started working with javascript so please excuse my lack of knowledge.
This is the code i need to make specific to the state of virginia rather than every state opening the same window.
'click' : function(event, data) {
window.open('/wp-content/themes/midAtlantic_2_12_11/carriers/va.php','_blank','height=500, width=800, scrollbars=no, channelmode=yes, menubar=no, left=480, top=200, titlebar=no, toolbar=no, location=no status=no','false')
}
});
});
Full page of code
<!DOCTYPE html>
<html>
<body style="margin:0px;">
<script src="/wp-content/themes/midAtlantic_2_12_11/lib/raphael.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="/wp-content/themes/midAtlantic_2_12_11/s/color.jquery.js"></script>
<script src="/wp-content/themes/midAtlantic_2_12_11/js/us-map.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
'stateSpecificHoverStyles': {
'HI' : {fill: '#ccc'},
'AK' : {fill: '#ccc'},
'WA' : {fill: '#ccc'},
'ID' : {fill: '#ccc'},
'MT' : {fill: '#ccc'},
'WY' : {fill: '#ccc'},
'ND' : {fill: '#ccc'},
'IA' : {fill: '#ccc'},
'MN' : {fill: '#ccc'},
'WI' : {fill: '#ccc'},
'UT' : {fill: '#ccc'},
'NE' : {fill: '#ccc'},
'SD' : {fill: '#ccc'}
},
'stateSpecificStyles': {
'AL': {fill: '#d2232a'},
'AR': {fill: '#d2232a'},
'AZ': {fill: '#d2232a'},
'CA': {fill: '#d2232a'},
'CO': {fill: '#d2232a'},
'CT': {fill: '#d2232a'},
'DC': {fill: '#d2232a'},
'DE': {fill: '#d2232a'},
'FL': {fill: '#d2232a'},
'GA': {fill: '#d2232a'},
'IL': {fill: '#d2232a'},
'IN': {fill: '#d2232a'},
'KS': {fill: '#d2232a'},
'KY': {fill: '#d2232a'},
'LA': {fill: '#d2232a'},
'ME': {fill: '#d2232a'},
'MD': {fill: '#d2232a'},
'MA': {fill: '#d2232a'},
'MI': {fill: '#d2232a'},
'MO': {fill: '#d2232a'},
'MS': {fill: '#d2232a'},
'NC': {fill: '#d2232a'},
'NH': {fill: '#d2232a'},
'NJ': {fill: '#d2232a'},
'NM': {fill: '#d2232a'},
'NY': {fill: '#d2232a'},
'NV': {fill: '#d2232a'},
'OH': {fill: '#d2232a'},
'OK': {fill: '#d2232a'},
'OR': {fill: '#d2232a'},
'PA': {fill: '#d2232a'},
'RI': {fill: '#d2232a'},
'SC': {fill: '#d2232a'},
'TN': {fill: '#d2232a'},
'TX': {fill: '#d2232a'},
'VA': {fill: '#d2232a'},
'VT': {fill: '#d2232a'},
'WV': {fill: '#d2232a'}
},
'click' : function(event, data) {
window.open('/wp-content/themes/midAtlantic_2_12_11/carriers/va.php','_blank','height=500, width=800, scrollbars=no, channelmode=yes, menubar=no, left=480, top=200, titlebar=no, toolbar=no, location=no status=no','false')
}
});
});
</script>
<div id="map" style="width: 800px; height: 630px; border: solid 0px #ccc; margin:auto;"></div>
</body>
</html>
