2014-03-06 34 views
-1

Infowindow沒有顯示在谷歌地圖適當的地方,所有infowindow都顯示在同一點。Infowindow在谷歌地圖不顯示在相關的點

我從數據庫中動態獲取記錄,並在單個地圖上顯示多個標記。

<script language="javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/src/markerwithlabel.js"></script> 
    <script type="text/javascript"> 




var markers = [ 
      ['<div style="float:left;"><span style="float:left; margin-right:5px;"><a href="property-detail.php?ml_num=2620768"><img src="cropImage.php?image=http://links.mlslirealtor.com/mlsphotos/full/1/768/2620768.jpg&w=40&h=40" width="40" height="40" border="0" ></a></span><span style="float:left; text-align:center;">22-13 Steinway St<br>NY, 11103</span></div>', 40.772327, -73.906257],['<div style="float:left;"><span style="float:left; margin-right:5px;"><a href="property-detail.php?ml_num=2618343"><img src="cropImage.php?image=http://links.mlslirealtor.com/mlsphotos/full/1/343/2618343.jpg&w=40&h=40" width="40" height="40" border="0" ></a></span><span style="float:left; text-align:center;">44-09 Broadway<br>NY, 11103</span></div>', 40.7584945, -73.9185441],['<div style="float:left;"><span style="float:left; margin-right:5px;"><a href="property-detail.php?ml_num=2563251"><img src="cropImage.php?image=http://links.mlslirealtor.com/mlsphotos/full/1/251/2563251.jpg&w=40&h=40" width="40" height="40" border="0" ></a></span><span style="float:left; text-align:center;">48-15 31 Ave<br>NY, 11103</span></div>', 41.440565, -74.392076],['<div style="float:left;"><span style="float:left; margin-right:5px;"><a href="property-detail.php?ml_num=2474854"><img src="cropImage.php?image=http://links.mlslirealtor.com/mlsphotos/full/1/854/2474854.jpg&w=40&h=40" width="40" height="40" border="0" ></a></span><span style="float:left; text-align:center;">30-62 36th St<br>NY, 11103</span></div>', 40.7635902, -73.9188238],['<div style="float:left;"><span style="float:left; margin-right:5px;"><a href="property-detail.php?ml_num=2641580"><img src="cropImage.php?image=http://links.mlslirealtor.com/mlsphotos/full/1/580/2641580.jpg&w=40&h=40" width="40" height="40" border="0" ></a></span><span style="float:left; text-align:center;">25-92 36th St<br>NY, 11103</span></div>', 40.767123, -73.916005]   ]; 



var labels = ["$199k","$3.20k","$65.80k","$1.88m","$1.50m","$1.80m"]; 

function initializeMaps() { 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     //mapTypeId: google.maps.MapTypeId.TERRAIN 
     mapTypeControl: true 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < markers.length; i++) { 
     var pos = new google.maps.LatLng(markers[i][1], markers[i][2]); 
     bounds.extend(pos);    


      var marker = new MarkerWithLabel({ 
       position: pos, 
       draggable: true, 
       raiseOnDrag: true, 
       map: map, 
       icon: 'assets/images/home_iconddd.png', 
       labelContent: labels[i], 
      //labelAnchor: new google.maps.Point(0, 0), 
       labelClass: "labels" // the CSS class for the label 
       //labelStyle: {opacity: 0.95} 
      }); 

     google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
      return function() { 
       infowindow.setContent(markers[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    map.fitBounds(bounds); 
} 
    </script> 
     <div id="map_canvas" style="height:850px"></div> 
+0

請重新格式化您的代碼,它幾乎是不可讀 – faboolous

+0

@fablife我已經格式化,但仍表現出同樣的問題... [谷歌地圖API的 –

+0

可能重複 - 多個圖標在錯誤的地方](http://stackoverflow.com/questions/22202569/google-map-api-multiplei-i錯誤的現場) – geocodezip

回答

0

檢查您的addListener,它有一個功能(標記,I)...回調但你也利用i作爲循環變量

我不能測試(你沒有提供完整的代碼),所以也許這是垃圾:

google.maps.event.addListener(marker, 'mouseover', function() { 
       infowindow.setContent(markers[i][0]); 
       infowindow.open(map, marker); 
      });