Google地图V3：通过AJAX加载infowindow内容 [英] Google Maps V3: Loading infowindow content via AJAX

问题描述

使用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（标记， '点击'，函数（）{
 infowindow.close（）; 
 infowindow.setContent（< DIV类= 'infowindow_content' >< ; IFRAME SRC ='奥拉/显示/ + a.aula.id + '>< / iframe中< / DIV> 中）; 
 
 infowindow.open（地图，标记物）; 
}）; 
 markers.push（marker）; 
}）; 
  

在infowindow.setContent调用之前通过ajax抓取内容很容易，但我想要仅在infowindow打开时才进行ajax调用。任何想法？

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

正如答案中的建议，我决定移动调用setContent并打开一个单独的函数。对于那些感兴趣的解决这个问题的代码是：
$ b $ pre> function load_content（marker，id）{
$ .ajax（ {
url：'aulas / show /'+ id，
成功：函数（数据）{
infowindow.setContent（data）;
infowindow.open（map，marker） ;
}
}）;
}


然后更改侦听器：

  google.maps.event.addListener（marker，'click'，function（）{
 infowindow.close（）; 
 load_content（marker，a .aula.id）; 
}）; 
 markers.push（marker）; 
}）; 
  

解决方案

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

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:

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?

BTW: I am using 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:

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);
  });

解决方案

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.

这篇关于Google地图V3：通过AJAX加载infowindow内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！