Open Different Modals from onMarkerClick

Question

My problem is that I want a different modal to load based on the name in the markerSet array, but right now the if/else returns the same modal every time.

Please see if statement in my JS below. The name: "Tulsa" marker should open #tulsa-modal, and every other marker should open #band-modal. Any ideas?

var markerSet = [
    {latLng: [36.13, -95.93], name: "Tulsa"},
    {latLng: [38.62, -90.19], name: "St. Louis"},
    {latLng: [44.98, -93.26], name: "Minneapolis"}
];

 $(function(){
    $('#usa').vectorMap({
                  map: 'us_aea_en',
                  // the rest cut for brevity..
            },

         markers: markerSet,
               onMarkerClick: function(event, index){
                if($.inArray("Tulsa", markerSet) == -1) {
                  $('#tulsa-modal').modal();
              }
               else {
                $('#band-modal').modal();
            }
          }                
     });
});

Answer 1

You are checking if "tulsa" exists in a markerSet array - this will always return true as that value is always present in the array, so the first modal will always open.

You need to pass some sort of identifier for the marker you clicked (eg. your onMarker click might return a name for that marker) and check that value and display appropriate modal.

I am not familiar with the library you are using but it might be something like the following

    var markerSet = [
    {latLng: [36.13, -95.93], name: "Tulsa"},
    {latLng: [38.62, -90.19], name: "St. Louis"},
    {latLng: [44.98, -93.26], name: "Minneapolis"}
];



   $(function(){
        $('#usa').vectorMap({
                      map: 'us_aea_en',
                      // the rest cut for brevity..
                },

             markers: markerSet,
                   onMarkerClick: function(event, index){

//check the name property of the clicked marker object

                    if(markerSet[index].name == "Tulsa") {
                      $('#tulsa-modal').modal();
                  }
                   else {
                    $('#band-modal').modal();
                }
              }                
         });
    });