JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.lexmundi.com/images/lexmundi/template/CentralAmericaMap/jquery-jvectormap-2.0.0.css">
<script src="http://www.lexmundi.com/images/lexmundi/template/CentralAmericaMap/jquery-jvectormap-2.0.0.min.js"></script>
<script src="http://www.namb.org/images/namb/template/2012/js//mylibs/jvectormap/jquery-jvectormap-us-en.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="contacts-map"></div>
<!-- Location modal content Begin -->
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 1</b>
</div>
</div>
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 2</b>
</div>
</div>
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 2</b>
</div>
</div>
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 2</b>
</div>
</div>
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 2</b>
</div>
</div>
<div class="modal-Texas hide">
<div class="modal-conent">This is content for <b>Texas 2</b>
</div>
</div>
<div class="modal-California hide">
<div class="modal-conent">This is content for <b>California</b>
</div>
</div>
<div class="modal-New Mexico hide">
<div class="modal-conent">This is content for <b>New Mexico</b>
</div>
</div>
<div class="modal-New Mexico hide">
<div class="modal-conent">This is content for <b>New Mexico</b>
</div>
</div>
<div class="modal-New York hide">
<div class="modal-conent">This is content for <b>New York</b>
</div>
</div>
<!-- Location content End -->
JavaScript
$(document).ready(function () {
$('#contacts-map').css({
width: '100%',
height: '450px',
padding: '15px'
});
var customModal = $('<div class="modal fade bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="modal"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body"></div></div></div></div>');
var RColor = '#007cc4';
var stateHTML = {
"US-VA": {"location": "Virginia"},
"US-PA": {"location": "Pennsylvania"},
"US-TN": {"location": "Tennessee"},
"US-WV": {"location": "West Virginia"},
"US-NV": {"location": "Nevada"},
//"US-TX": {"location": "Texas"},
"US-NH": {"location": "New Hampshire"},
"US-NY": {"location": "New York"},
"US-HI": {"location": "Hawaii"},
"US-VT": {"location": "Vermont"},
"US-NM": {"location": "New Mexico"},
"US-NC": {"location": "North Carolina"},
"US-ND": {"location": "North Dakota"},
"US-NE": {"location": "Nebraska"},
"US-LA": {"location": "Louisiana"},
"US-SD": {"location": "South Dakota"},
"US-DC": {"location": "District of Columbia"},
"US-DE": {"location": "Delaware"},
"US-FL": {"location": "Florida"},
"US-CT": {"location": "Connecticut"},
//"US-WA": {"location": "Washington"},
"US-KS": {"location": "Kansas"},
"US-WI": {"location": "Wisconsin"},
"US-OR": {"location": "Oregon"},
//"US-KY": {"location": "Kentucky"},
"US-ME": {"location": "Maine"},
"US-OH": {"location": "Ohio"},
"US-OK": {"location": "Oklahoma"},
"US-ID": {"location": "Idaho"},
"US-WY": {"location": "Wyoming"},
"US-UT": {"location": "Utah"},
"US-IN": {"location": "Indiana"},
"US-IL": {"location": "Illinois"},
//"US-AK": {"location": "Alaska"},
"US-NJ": {"location": "New...