Google Maps V3：通过AJAX加载infowindow内容

What is the best way to load content into my infowindow using ajax? Right now I am getting a similar effect using iframes but I am not that that happy with it. I thought this would be straight forward but its confusing me for some reason. This is how its working right now:

使用ajax将内容加载到我的infowindow的最佳方法是什么？现在我使用iframe得到了类似的效果，但我并不满意。我认为这将是直截了当的，但由于某种原因令我感到困惑。这就是它现在的工作方式：

var markers = [];
  var infowindow = new google.maps.InfoWindow();
  $.each(JSON.parse(aulas), function(i, a){

    var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
    var marker = new google.maps.Marker({
      position : latlng,
      title: a.aula.title
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");

      infowindow.open(map, marker);
    });
    markers.push(marker);
  });

It would be easy to grab the content via ajax just before the infowindow.setContent call, but I want to make the ajax call only when the infowindow opens. Any thoughts?

在infowindow.setContent调用之前通过ajax获取内容很容易，但我想只在infowindow打开时才进行ajax调用。有什么想法吗？

BTW: I am using jQuery.

顺便说一句：我正在使用jQuery。

As was suggested in the answer I decided to move the calls to setContent and open to a separate function. For those interested the code that solved this was:

正如在答案中所建议的那样，我决定将调用移到setContent并打开一个单独的函数。对于那些感兴趣的人，解决这个问题的代码是

function load_content(marker, id){
  $.ajax({
    url: 'aulas/show/' + id,
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

Then change the listener:

然后改变监听器：

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.push(marker);
  });

3 个解决方案

#1

You can call infowindow.setContent at any point after the info window has been shown. So you could initially set your info window content with a spinner, make the AJAX call (from the event handler) and then call infowindow.setContent again from the AJAX response with the appropriate data.

您可以在显示信息窗口后的任何时刻调用infowindow.setContent。因此，您最初可以使用微调器设置信息窗口内容，进行AJAX调用（来自事件处理程序），然后使用适当的数据再次从AJAX响应调用infowindow.setContent。

#2

for (var i = 0; i < markersClient.length; i++) {
            var location = new google.maps.LatLng(lats[i], longs[i]);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                lid: markersClient[i].t
            });
            var infowindow = new google.maps.InfoWindow({
                content: ""
            });
            //debugger;
            marker.setTitle(" - ");
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', function (target, elem) {
                infowindow.open(map, marker);
                $.ajax({
                      success:function () {
                      infowindow.setContent(contentString);
                     }
               });

intitalize map , marker , infowindow(as no content) and on marker 's click handler make ajax request

intitalize map，marker，infowindow（as no content）和标记的click处理程序发出ajax请求

#3

Already the content to the infoWindow is loaded but there are possibility if you are uploading images of large size then we have to wait for the first time to load the image fully and then set the content of infowindow and then display that infowindow. The solutions to the above requirement is ok but for images it might not get loaded instantly so to do that you have to check whether the content of the infowindow is loaded or not then only you have to display the info window.

已经加载了infoWindow的内容，但是如果你要上传大尺寸图像，我们必须等待第一次完全加载图像，然后设置infowindow的内容然后显示infowindow。上述要求的解决方案是可以的，但对于图像，它可能不会立即加载，所以你必须检查信息窗口的内容是否加载，然后只需要显示信息窗口。