jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.
Many maps of the world, world regions, countries and cities are available for download from this site. All of them are made from the data in public domain or data licensed under the free licenses, so you can use them for any purpose without of charge.
Complete Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css">
</head>
<body>
<h1 style="text-align:center;">Implement World Map using jVectorMap</h1>
<div id="vmap" style="margin:0 auto;width:80%;height:520px;"></div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script>
<script type="text/javascript">
var countries = '';
function getCountryData(){
$.ajax({
url:'countries.json',
type:'get',
success:function(res){
countries = JSON.parse(res);
}
});
}
getCountryData();
$(document).ready(function(){
$("#vmap").vectorMap({
map: 'world_en',
backgroundColor:'#222',
borderColor:'#555',
color:'#555',
hoverOpacity:0.7,
selectedColor:'#666666',
enableZoom:true,
enableDrag:true,
showTooltip:true,
normalizeFunction:'polynomial',
onLabelShow:function(event,label,code){
code = code.toUpperCase();
country_name = countries[code];
label.html('<strong>'+country_name+'</strong>');
}
});
});
</script>
</body>
</html>
Follow this video for complete guidance :
