I'm working with Jvectormap for the first time, and I used a basic code I found in github with the map of Brazil ( link ), I made my modification but I could not put the name of the states and markers with the mouse as I saw in other maps. Could someone help me?
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap: Brazil map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/js/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="assets/js/brazil.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div class="white-box">
<h3 class="box-title">MAPA DO BRASIL</h3>
<div id="brazil-map"><div id="regionover"><span>??</span></div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var map_settings = {
map: 'brazil',
zoomButtons: false,
zoomMax: 1,
regionStyle: {
initial: {
'fill-opacity': 1,
stroke: '#fff',
'stroke-width': 100,
'stroke-opacity': 1,
cursor: 'pointer',
},
hover: {
fill: '#79E580',
}
},
backgroundColor: '#ffffff',
markerStyle: {
initial: {
fill: '#fff',
stroke: '#d5d5d5',
"fill-opacity": 1,
"stroke-width": 4,
"stroke-opacity": 1,
r: 10
},
hover: {
fill: '#fff',
stroke: '#d5d5d5',
"fill-opacity": 1,
"stroke-width": 3,
"stroke-opacity": 0.7,
r: 10
}
},
markers: [{
values: 'Uberlândia',
coords: [130000, 120000],
name: 'Uberlândia',
style: {fill: '#fff'}},
{
values: 'Petrolina',
coords: [165000, 69000],
name: 'Petrolina',
style: {fill: '#fff'}
}],
series: {
regions: [{
values: {
// Região Norte
ac: '#79E580',
am: '#79E580',
ap: '#79E580',
pa: '#79E580',
ro: '#79E580',
rr: '#79E580',
to: '#79E580',
// Região Nordeste
al: '#79E580',
ba: '#79E580',
ce: '#79E580',
ma: '#79E580',
pb: '#79E580',
pe: '#79E580',
pi: '#79E580',
rn: '#79E580',
se: '#79E580',
// Região Centro-Oeste
df: '#79E580',
go: '#79E580',
ms: '#79E580',
mt: '#79E580',
// Região Sudeste
es: '#79E580',
mg: '#79E580',
rj: '#79E580',
sp: '#79E580',
// Região Sul
pr: '#79E580',
rs: '#79E580',
sc: '#79E580'
},
attribute: 'fill'
}]
},
container: $('#brazil-map'),
onRegionOver: function (event, code) {
$('#regionover span').text(code);
}
};
map = new jvm.WorldMap($.extend(true, {}, map_settings));
});
</script>
</body>
</html>