javascript - Loading map data from JSON using $.getJSON -

using gmap3 (a jquery plugin) display google maps interface. i'm trying load data json file reason it's not executing. map displays, addmarkers() function being called, if put console.log() anywhere inside function(data), doesn't display.

i'm confused these anonymous functions , haven't worked asynchronous functions before. advice appreciated.

javascript

$(document).ready(function(){   displaymap();   addmarkers(); });   // create map options function displaymap(){   $('#map_canvas').gmap3({    map: {      options: mapoptions    }             }); };  // load data , add markers 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."} }   ] } 

silly me, checked json format using http://jsonlint.com/ , discovered malformed. needed enclose 'key' names in quotes ...

{ "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."} }   ] }