Loading map data from JSON using $.getJSON

Question

Using gmap3 (a jquery plugin) to display a Google maps interface. I'm trying to load my data from a JSON file but for some reason it's not executing. The map displays, the addMarkers() function is being called, but if I put a console.log() anywhere inside function(data), it doesn't display.

I'm somewhat confused about these anonymous functions and haven't worked with asynchronous functions before. Any advice would be much appreciated.

Javascript

$(document).ready(function(){
  displayMap();
  addMarkers();
});


// Create map with options
function displayMap(){
  $('#map_canvas').gmap3({
   map: {
     options: mapOptions
   }          
  });
};

// Load data and add markers for each data point
function addMarkers(){
  $.getJSON( dataURL, function(data) {          
    $.each( data.markers, function(i, marker) {
      console.log( marker.lat + ':' + marker.lng + ':' + marker.data.category + ':' + marker.data.content );
    })
  });                  
};

JSON

{
markers: [
    { lat:-30, lng:145, data: {title: "Le Restaurant", category:"Restaurant", content:"Some French restaurant"} },
    { lat:-30, lng:145, data: {title :"Gem Cafe", category:"Cafe", content:"They sell coffee"} },
    { lat:-30, lng:145, data: {title :"Home", category:"Home", content:"Home sweet home."} }
  ]
}

Answer 1

Silly me, just checked my JSON format using http://jsonlint.com/ and discovered it was malformed. I needed to enclose the 'key' names in quotes like so ...

{
"markers": [
    { "lat":-30, "lng":145, "data": {"title": "Le Restaurant", "category":"Restaurant", "content":"Some French restaurant"} },
    { "lat":-30, "lng":145, "data": {"title" :"Gem Cafe", "category":"Cafe", "content":"They sell coffee"} },
    { "lat":-30, "lng":145, "data": {"title" :"Home", "category":"Home", "content":"Home sweet home."} }
  ]
}