Загрузка данных карты из JSON с использованием $ .getJSON

Question

Использование gmap3 (плагин jquery) для отображения интерфейса карт Google. Я пытаюсь загрузить мои данные из файла JSON, но по какой-то причине он не выполняется. Отображается карта, вызывается функция addMarkers(), но если я помещаю console.log() где-нибудь внутри функции (данных), она не отображается.

Я немного смущен об этих анонимных функциях и раньше не работал с асинхронными функциями. Любые советы будут высоко ценится.

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

Глупый меня, только что проверил мой формат JSON с помощью http://jsonlint.com/ и обнаружил, что это был неправильный формат. Мне нужно было приложить «ключевые» имена в котировках, подобных этому ...

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