Basic problem with scoping?

JavaScript
1

Hey guys, I’m new with JS and I’m trying to fiddle a little with Google Maps. I found a few tutorials and [URL=“http://econym.org.uk/gmap/example_categories.htm”]source codes, so I’m copy-pasting and trying to adapt it to my needs:

Here’s what I need to do:

  1. Load the map at a location
  2. Load some markers from a file (I’m using JSON atm but I think I’ll run into some problems later on)
  3. Place the markers in the map
  4. Put some checkboxes to toggle a group of markers.

Now, I was able to do it without step number 2 (source), but I can’t load them from a file. If you see the source code in the next link (not the previous one), the features array is empty (check the console.log), maybe it’s due to variable scoping? What can I do to avoid it? Here’s the source:

http://gonzalezmora.com/test/sitepoint/gmaps/

Thanks in advance! :slight_smile:

PS: regarding the JSON problem, I have to put some HTML code in the files (like on line 87 in main.js), should I just put everything in one line, or should I use another format instead of JSON? If so, which one do you recommend?

2

Well, it seems it was because the JSON is loaded asynchronously, so the rest of the code was executed before that and it caused problems. I was able to resolve it like so:

  $.ajax({
    type: 'GET',
    url: 'js/marcadores.json',
    dataType: 'json',
    success: function(marcadores) {
      for (var i=0; i<marcadores.length; i++) {
        features.push(marcadores[i]);
      } 
    },
    cache: false, // for testing purposes
    async: false
  });