谷歌地图多个infowindow不工作

我试图添加多个标记和infowindow到谷歌地图使用JavaScript。下面是代码：谷歌地图多个infowindow不工作

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
    type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 400px;"></div> 
    <script type="text/javascript"> 
     var locations = [ '1961 East Mall Vancouver BC', 
       '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ]; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom : 14, 
      center : new google.maps.LatLng(49.26526, -123.250541), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }); 

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

     var marker, i; 

     for (i = 0; i < locations.length; i++) { 

      var geocoder = new google.maps.Geocoder(); 
      geocoder 
        .geocode(
          { 
           'address' : locations[i] 
          }, 
          function(results, status) { 
           if (status == google.maps.GeocoderStatus.OK) { 
            map.setCenter(results[0].geometry.location); 
            marker = new google.maps.Marker({ 
             map : map, 
             position : results[0].geometry.location 
            }); 
           } else { 
            alert('Geocode was not successful for the following reason: ' 
              + status); 
           } 
          }); 

      //add info window 
      google.maps.event.addListener(marker, 'click', 
        (function(marker, i) { 
         return function() { 
          infowindow.setContent(locations[i]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
      //end of adding info window 

     }//end of for loop 
    </script> 
</body> 
</html>

（感谢Google Maps JS API v3 - Simple Multiple Marker Example）

的问题是：除非我的评论

  //add info window 
      google.maps.event.addListener(marker, 'click', 
        (function(marker, i) { 
         return function() { 
          infowindow.setContent(locations[i]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
      //end of adding info window

点击时，我只会得到一个标志，没有信息窗口弹出。

如果我评论上面的代码块，我会得到三个标记，但没有infowindow弹出。

我在哪里犯错？

谢谢。

来源

2012-08-27 Minghui Yu

你意识到你应该对每个标记附加不同的回调？ – ruX

不，我是google maps api和一个web搜索领导者。现在开始阅读Google地图文档。听起来很多。 –

谢谢@ ruX3提示。 –

地理编码器是异步的，您需要在地理编码器回调中添加infowindow。您目前拥有它的地方在任何标记被定义之前运行。我想你会得到一个JavaScript错误。

来源

2012-08-27 20:27:57 geocodezip

谢谢。你的评论确实有帮助。 –

这工作：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
    type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 500px; height: 400px;"></div> 
    <script type="text/javascript"> 
     var locations = [ '1961 East Mall Vancouver BC', 
       '2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ]; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom : 14, 
      center : new google.maps.LatLng(49.26526, -123.250541), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     var marker; 
     var i; 

     $(document).ready(function() { 
      initialize(); 
     }); 

     function initialize(){ 
      setMarkers(map,locations); 
     } 

     function setMarkers(map, address) { 
      for (var i = 0; i < address.length; i++) { 
       setMarker(map, address[i]) 
      } 
     } 

     function setMarker(map, address) { 
      geocoder = new google.maps.Geocoder(); 
      geocoder 
        .geocode(
          { 
           'address' : address 
          }, 
          function(results, status) { 
           if (status == google.maps.GeocoderStatus.OK) { 
            map.setCenter(results[0].geometry.location); 
            var marker = new google.maps.Marker(
              { 
               position : results[0].geometry.location, 
               map : map 
              }); 
            google.maps.event.addListener(marker, 
              "click", function() { 
               infowindow.setContent(address); 
               infowindow.open(map, marker); 
              }); 
           } else { 
            alert("Geocode was not successful for the following reason: " 
              + status); 
           } 

          }); 
     } 
    </script> 
</body> 
</html>

由于Google Map multiple infowindow does not work

来源

2012-08-27 23:43:46

谷歌地图多个infowindow不工作

回答

相关问题