I'm trying to build a page that will display several points on a map, each representing a scheduled event with a Title, location, date, link, and description. For the map itself, I'm using the maplace plugin (http://maplacejs.com), and the events are being stored in a .json file. Currently, I get no errors in the log, and the map appears on page load, but the points don't appear. Here's the relevant code:
data.json
{ "allEvents": [
  {
  "eventName" : "Event #1",
  "eventDate" : "May 27, 2014",
  "lat": "52.963619",
  "long": "-125.619140",
  "link": "http://www.google.com"
  "description" : "short description"},
]}
in my header script
 var eventLocations = [];
 $.getJSON('data.json', function(events) {
        for (var i in data.allEvents) {
            var name = data.allEvents[i].eventName;
            var date = data.allEvents[i].eventDate;
            var latitude = data.allEvents[i].lat;
            var longitude = data.allEvents[i].long;
            var link = data.allEvents[i].link;
            var desc = data.allEvents[i].description;
            var loc = "{ lat: " + latitude + "," +
                        "lon: " + longitude + "," +
                        "icon: images/icon3.png," +
                        "title: " + name + "," +
                        "html: <div class='infoWindow'>" +
                        "<h3>" + name + "</h3>" +
                        "<h4>" + date + "</h4>" +
                        "<a href='http://" + link + "' target='_blank'>view website</a>" +
                        "<p>" + desc + "</p>" +
                        "</div> },";
            eventLocations.push(loc);                
        };
    });
and
$(function() {
  var maplace = new Maplace({
    //I have lots of other parameters here (controls, stylers, options, etc)
    locations: [ eventLocations ]
  }); 
  maplace.Load();
It's also worth mentioning that if I write out one location in the Maplace (i.e. in place of the 'eventLocations' variable, the pin shows up fine.
Thanks in advance!
