使用ajax v3的谷歌地图信息窗口

Question

我已经差不多明白了，但还不太管用。我试图通过 ajax 加载内容，它确实加载了正确的内容，我可以看到它在 firebug 中加载，但是，它给了我一个错误：infowindow 未定义。我的 load_content 有点不对劲

在 load_content 之前的两行注释掉的行可以加载一个带有一些文本的小窗口。

function initialize() {
  var myLatlng = new google.maps.LatLng(<%= @location_for_map.average(:lat) %>, <%= @location_for_map.average(:lng) %>);
  var myOptions = {
   zoom: 13,
   center: myLatlng,
   mapTypeControl: false,
   navigationControl: true,
   navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
   },
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  //var infowindow = new google.maps.InfoWindow();

  setMarkers(map, places);

 }

 function setMarkers(map, locations) {
   // Add markers to the map

  for (var i = 0; i < locations.length; i++) {
      var place = locations[i];
      var myLatLng = new google.maps.LatLng(place.lat, place.lng);
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: '/images/google_maps/numbers/'+(i+1)+'.png',
    html: place.name,
    id: place.id,
          title: place.name
      });

   var infowindow = new google.maps.InfoWindow();

   google.maps.event.addListener(marker, 'click', function() {
     //infowindow.setContent(this.html);
     //infowindow.open(map,this);
     load_content(marker, this.id);

   });
  }
 }

 function load_content(marker, id){
   $.ajax({
     url: '/places/' + id + '.js',
     success: function(data){

       infowindow.setContent(data);
       infowindow.open(map, marker);
     }
   });
 } 

 function loadScript() {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
     document.body.appendChild(script);
 }

Answer 1

这有效：

function setMarkers(map, locations) {
  // Add markers to the map

    for (var i = 0; i < locations.length; i++) {
        var place = locations[i];
        var myLatLng = new google.maps.LatLng(place.lat, place.lng);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: '/images/google_maps/numbers/'+(i+1)+'.png',
            html: place.name,
            id: place.id,
            title: place.name
        });

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', function() {
          load_content(map,this,infowindow);      
        });
    }
}

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

Answer 2

您的 infowindow 声明仅在函数内部具有作用域。尝试声明具有全局作用域的 infowindow 变量。我相信这就是导致“信息窗口未定义”问题的原因。

Answer 3

将此行移动

var infowindow = new google.maps.InfoWindow();  

到任何函数之外，例如紧接在函数initialize(){}之后