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

I've almost got it, but it doesn't quite work. I'm trying to load the content via ajax, and it does load the correct content, I can see it loading in firebug however, it gives me an error: infowindow not defined. I've got something out of place with load_content

我已经快拿到了，但是不太好用。我正在尝试通过ajax加载内容，它确实加载了正确的内容，我可以看到它正在加载firebug但是，它给了我一个错误:infowindow没有定义。我用load_content有些地方不太合适

The two commented out lines before load_content work to load a little window with some text.

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

3 个解决方案

#1

This works:

如此:

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

#2

Your infowindow declaration has scope only inside the function. Try declaring the infowindow variable with global scope. I believe that's what's causing the 'infowindow not defined' problem.

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

#3

Move this line:

移动这条线:

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

to be outside any function, eg just after function initialize(){}

要在任何函数之外(如在函数初始化(){}之后)

#1