jquery - jVectorMap - How to add marker dynamically -

i'm using jvectormap plugin add map website. here map added markers on page load. there way dynamically? need add them on mouse click. use jvectormap plugin

   var plants = [         {name: 'vak', coords: [-25.274398, 133.775136], status: 'mrk'},         {name: 'mzfr', coords: [37.090240, -95.712891], status: 'mrk'},         {name: 'avr', coords: [50.9030599, 6.4213693], status: 'mrk'}        ];     $('#world-map-markers').vectormap({     map: 'world_mill_en',            normalizefunction: 'polynomial',             markerstyle: {         initial: {             fill: '#f8e23b',             stroke: '#383f47'         }     },     backgroundcolor: '#383f47',     markers: plants.map(function(h) {         return {             name: h.name,             latlng: h.coords         }     }),     series: {         markers: [{             attribute: 'image',             scale: {                 'mrk': 'marker.png'             },             values: plants.reduce(function(p, c, i) {                 p[i] = c.status;                 return p             }, {}),          }]     }     });     }); 

initialize map empty markers , values:

mapobj = new jvm.map({     container: $('#world-map-markers'),     map: 'world_mill_en',            normalizefunction: 'polynomial',             markerstyle: {         initial: {             fill: '#f8e23b',             stroke: '#383f47'         }     },     backgroundcolor: '#383f47',     markers: [],     series: {         markers: [{             attribute: 'image',             scale: {                 'mrk': 'marker.png'             },             values: [],             }]     } });  

just point out can set markers , values separately, declare 2 arrays:

var mapmarkers = []; var mapmarkersvalues = []; 

then, wherever need click handler, call function this:

function addplantsmarkers() {    var plants = [         {name: 'vak', coords: [-25.274398, 133.775136], status: 'mrk'},         {name: 'mzfr', coords: [37.090240, -95.712891], status: 'mrk'},         {name: 'avr', coords: [50.9030599, 6.4213693], status: 'mrk'}     ];     mapmarkers.length = 0;     mapmarkersvalues.length = 0;     (var = 0, l= plants.length; < l; i++) {         mapmarkers.push({name: plants[i].name, latlng: plants[i].coords});         mapmarkersvalues.push(plants[i].status);     }     mapobj.addmarkers(mapmarkers, []);     mapobj.series.markers[0].setvalues(mapmarkersvalues);    } 

final result: