複数のGoogleマップinfowindow

Question

現在私は自分のDBから地図上にいくつかのマーカーを表示するGoogleマップを持っています...ユーザーがマーカーをクリックしたときにインフォーワードウィンドウを追加したいと思います。

私はそれを動作させましたが、問題はロードされた最後のマーカーにしか表示されないことです、なぜですか？

マーカーとインフォウィンドウを生成するコードは次のとおりです。

<script type="text/javascript"> 
function initialize() { 
    var myOptions = { 
     zoom: 3, 
     center: new google.maps.LatLng(41.850033, -87.6500523), 
     disableDefaultUI: true, 
     navigationControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, offices); 
} 


/** 
* Data for the markers consisting of a name, a LatLng and a zIndex for 
* the order in which these markers should display on top of each 
* other. 
*/ 
var offices = [<cfoutput>#officeList#</cfoutput>]; 

function setMarkers(map, locations) { 
    // Add markers to the map 
    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 
    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('images/pin.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    new google.maps.Size(14, 26), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0, 0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    new google.maps.Point(0, 32)); 

    for (var i = 0; i < locations.length; i++) { 
     var office = locations[i]; 
     var myLatLng = new google.maps.LatLng(office[1], office[2]); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: office[0], 
      zIndex: office[3] 
     }); 

     var contentString = "Hello!!!"; 
     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 
    } 
} 
</script> 

Answer 1

私もこの問題を遭遇しました。

は、ここで私はそれを固定方法は次のとおりです。

は私が情報ウィンドウにマーカーをバインドする機能を使用していました。

var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image, 
      title: office[0], 
      zIndex: office[3] 
     }); 

var contentString = "Hello!!!"; 
var infowindow = new google.maps.InfoWindow; 

bindInfoW(marker, contentString, infowindow); 

} 

function bindInfoW(marker, contentString, infowindow) 
{ 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(contentString); 
      infowindow.open(map, marker); 
     }); 
} 

Answer 2

http://www.codefx.biz/2011/01/google-maps-api-v3-multiple-infowindows

この方法も動作します！