$(function(){
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.WorldMap({
map: 'world_mill_en',
markerStyle: {
initial: {
fill: 'red'
}
},
container: $('#map'),
onMarkerLabelShow: function(e, label, code){
map.label.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.removeMarkers([code]);
map.label.hide();
}
});
map.container.click(function(e){
var latLng = map.pointToLatLng(e.offsetX, e.offsetY),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
});
<div id="map" style="width: 500px; height: 300px"></div>
External resources loaded into this fiddle: