jvectormaps customize onMarkerClick

Question

I'm successfully drawing a map using jvectormaps, where the user clicks on a marker I have an alert triggering.

I'd like to be able to add a custom item within the markers array which would serve as a record ID. Can someone modify the alert(id); line in the code below so it accesses the current marker's ID?

Here is the entire script:

$(function(){
  var markers = [
        {id: 1, latLng: [33.44838, -112.07404], name: 'Phoenix, AZ', style: {r: 12, fill: '#76c043'}},
        {id: 2, latLng: [39.73924, -104.99025], name: 'Denver, CO', style: {r: 30, fill: '#ffdd85'}},
        {id: 3, latLng: [37.33821, -121.88633], name: 'San Jose, CA', style: {r: 30, fill: '#f58a78'}}
      ];

  var map = new jvm.Map({
    container: $('.map'),
    map: 'us_aea_en',
    labels: {
      regions: {
        render: function(code){
          var doNotShow = ['US-RI', 'US-DC'];

          if (doNotShow.indexOf(code) === -1) {
            return code.split('-')[1];
          }
        },
        offsets: function(code){
          return {
            'CA': [-10, 10],
            'ID': [0, 40],
            'OK': [25, 0],
            'LA': [-20, 0],
            'FL': [45, 0],
            'KY': [10, 5],
            'VA': [15, 5],
            'MI': [30, 30],
            'AK': [50, -25],
            'HI': [25, 50]
          }[code.split('-')[1]];
        }
      }
    },
    backgroundColor:'#D3D3D3',
    zoomButtons:false,
    markers: markers,
    regionsSelectable: false,
    markersSelectable: false,
    markersSelectableOne: false,
    onMarkerClick: function(event, id){
      alert(id);
    },
         onRegionLabelShow: function (e, el, code) {
                 e.preventDefault();
         }
  });
});

I added in the id: 1, id:2, id:3 pieces in the markers array, now I just need help accessing it.

Answer 1

Just access your markers local variable by local id:

onMarkerClick: function(event, id){
  alert(markers[id].id);
},