1

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!

forrey
  • 31
  • 1
  • 3
  • 1
    Your JSON request is asynchronous. Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – geocodezip Sep 11 '14 at 05:15
  • try this- locations: eventLocations – Abs Sep 11 '14 at 05:47
  • can you put your code in jsbin or jsfiddel so that people can solve it. – Abs Sep 11 '14 at 05:49

0 Answers0