Два вызова $ .getJSON для одного информационного окна Google Maps. Проблема области

Question

Я пытаюсь вызвать $ .getJSON дважды и использовать данные из обоих в одном информационном окне. Это mashup для отображения статей из Новостей Google вместе с «удачей» (из RSS-канала) в инфо-окнах API Карт Google. Я поместил прослушиватель событий нажатия и окно информационного окна внутри вызова $ .getJSON ("articles.php"), поэтому этот код ниже работает, поскольку он отображает статьи, но я не могу определить правильную структуру для отображения состояние, так как оно находится в отдельном $ .getJSON с его собственным объемом. Есть ли способ сделать эту работу?

function addMarker(place) 
{ 

    var image = 'http://maps.google.com/mapfiles/kml/pal2/icon31.png'; 
    var myLatlng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude)); 
    //make markers and push to array. 
    var marker = new MarkerWithLabel({ 
    position: myLatlng, 
    map: map, 
    icon: image, 
    labelClass: "labels", 
    labelContent: place.place_name, 
    labelAnchor: new google.maps.Point(20,0),  
    }); 

    markers.push(marker); 

    // getJSON fortune from RSS feed. 
    var fortune = []; 
    $.getJSON("fortunes.php").done(function(data, textStatus, jqXHR) { 
     var content = data; 
     var len = data.length; 
     if (content.length < 1) 
     { 
      var fortune = "test"; 
     } 
     else 
     { 
      fortune = content; 
     } 

    });  
    // getJSON articles from Google News rss feed. 
    var query = place.postal_code; 
    var articles = "News service currently unavailable."; 
    var parameter = { "geo": query }; 
    $.getJSON("articles.php", parameter).done(function(data, textStatus, jqXHR) { 
     var content = data; 
     var len = data.length; 
     if (content.length < 1) 
     { 
      articles = "Slow news day." 
     } 
     else 
     { 
      articles = "<ul>"; 
      // put articles in unordered list 
      for (var i = 0; i < len; i++) { 
       articles += "<div><li> <a href=\"" + data[i].link + "\" target=\"_blank\">" + data[i].title + "</li></div>"; 
      } 
      articles += "</ul><div><p>FORTUNE</p><p>" + fortune.length + "</p></div>"; 
     } 
     // Listener for info window  
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
     }); 
     // Info window 
     var infowindow = new google.maps.InfoWindow({ 
      content: articles 
     }); 
    }); 

} 

Answer 1

Есть 4 способа сделать это.

1. Сделать AJAX звонков последовательно - смотрите пример кода ниже или http://jsfiddle.net/xs0oypmd/
2. Построить содержание маркеров окна, когда пользователь открывает его, поэтому двигайтесь статьи HTML строит код прослушивателя событий маркер мышей и использовать setContent на infoWindow. Если вы идете с этим подходом, я бы предложил использовать флаг, чтобы указать, когда откроется информационное окно, чтобы статьи html строились только один раз. У этого подхода есть ограничение, которое вы все еще не знаете, загрузили ли судьбы.
3. Сделать звонок «fortunes» изнутри «articles.php» - это предполагает право собственности на скрипты php. Этот подход означает один вызов AJAX из браузера.
4. Использовать структуру привязки модели, например. Нокаут, чтобы обновить содержимое InfoWindow, когда данные обновляются через JSon вызова

Пример кода Для варианта 1

$("#btnGetArticles").on("click", function(){ 
    var fortunes = "test"; 

    $.ajax({ 
     url: "/echo/json/", 
     type: 'post', 
     dataType: 'json', 
     data: { 
      json: '"some fortune"' 
     } 
    }).done(function(data) { 
     fortunes = data; 

     $.ajax({ 
      url: "/echo/json/", 
      type: 'post', 
      dataType: 'json', 
      data: { 
       json: '[{"link": "link/to/first/article", "title" : "first article"},{"link": "link/to/second/article", "title" : "second article"},{"link": "link/to/third/article", "title" : "third article"}]' 
      } 
     }).done(function(articles) { 
      var articlesList = $("<ul />"); 
      $.each(articles, function(i, v) { 
       articlesList.append($("<li />").html(v.title + ' ' + fortunes.length)); 
      }); 

      $("#output").append(articlesList); 
     }); 
    }); 
});