JvectorMap getJSON错误

I'm having trouble with getting JSON data to show up on a map, I figured having a separate set of eyes on my code could solve this.

controller

    $map = $this->dispatcher->getParam('map');
    $this->view->setVar("map", $map);

HTML Code

<div id="map<?php echo $map ?>" class="map" style="width: 600px; height: 400px"></div>

map.js

$(function () {
$.getJSON('../js/off-exchange.json', function (data) {
    var val = 2015;
    statesValues = jvm.values.apply({}, jvm.values(data.states));
    $('#mapoff-exchange').vectorMap({
        map: 'us_merc_en',
        backgroundColor: '#ffffff',
        regionStyle: {
            initial: {
                fill: '#87c9b4',
            },
            hover: {
                fill: '#2e8f70',
            },
        },
        onRegionTipShow: function (e, label, code) {
            var arr = data.states[val][code];
            var str = arr.join(",<br> ");
            var trim = str.replace(/^[,<br> ]+|[,<br> ]+$|[,<br> ]+(?=,<br>)/g, "");
            label.html('<b>' + label.html() + '</b>' + '<br> ' + trim);
        },
    });
  });
});

When I take out the $.getJSON code, the map shows up so I figured there was some issue with that, but I can not for the life of me figure it out

You still need to define your series, which is not present in your code. Try this code for showing regions:

$(function () {
$.getJSON('../js/off-exchange.json', function (data) {
    var val = 2015;
    statesValues = jvm.values.apply({}, jvm.values(data.states));
    $('#mapoff-exchange').vectorMap({
        map: 'us_merc_en',
        backgroundColor: '#ffffff',
        regionStyle: {
            initial: {
                fill: '#87c9b4',
            },
            hover: {
                fill: '#2e8f70',
            },
        },
        series: {
            regions: [{
              scale: ['#DEEBF7', '#08519C'],
              attribute: 'fill',
              values: data.states[val]
            }]
        },
        onRegionTipShow: function (e, label, code) {
            var arr = data.states[val][code];
            var str = arr.join(",<br> ");
            var trim = str.replace(/^[,<br> ]+|[,<br> ]+$|[,<br> ]+(?=,<br>)/g, "");
            label.html('<b>' + label.html() + '</b>' + '<br> ' + trim);
        }
    });
  });
});