Question

I’m trying to create a map using JVectorMap that will put information to an #output div after the user clicks a given marker (for example, if the user clicks on a marker labeled Alaska, facts about Alaska pop up in the #output div). Elsewhere on here, I’ve seen this code example, which outputs the name of the label…

onMarkerLabelShow: function(event, label, code) {
    $("#output").html("Some information about "+ label.html());
}

I’m trying to use a switch here…

onMarkerLabelShow: function(event, label, code) {
    switch (label) {
        case Alaska:
        $("#output").html($("#alaska-facts");
        [break;]

        case North Carolina:
        $("#output").html($("#nc-facts");
        [break;]

        default:
        $("#output").html("Please select a job site");
        [break;]
    }
}

The map doesn’t display when I run this code, and I may be on the wrong track altogether. Any help?

Answer 1

A couple of issues:

• The label is an object and will not match the simple case statements matching string values. You might want to evaluate against label.text()
• The values in the case should be quoted strings (i.e. "North Carolina", not North Carolina)
• The break; should not be wrapped in [] (you don’t want an array of break, you want to break out of the switch).
• You are missing a closing ) for the lines setting the .html() with jQuery ID selectors

Corrected example:

onRegionLabelShow: function(event, label, code) {
   switch (label.text()) {
      case "Alaska":
         $("#output").html($("#alaska-facts"));
         break;

      case "North Carolina":
         $("#output").html($("#nc-facts"));
         break;

      default:
         $("#output").html("Please select a job site");
         break;
   }
}