谷歌地圖標記集羣 - 如何使用infoWindow與位置索引

Question

我有一個谷歌地圖使用有一個位置索引在它下面，因此用戶可以點擊一個位置名稱和該地點的信息窗口在地圖上彈出。

我也使用Marker Clusterer v3。目前，點擊索引中的項目會導致集羣中項目的infoWindow在地圖左上角彈出。

如何讓infoWindow在正確的位置彈出？

這裏是我使用至今代碼：

var gmarkers = []; 
var map; 
var infoWindow; 

(function($) { 
    'use strict'; 

    $(function() { 
     initGmap(); 
     var openLink = $('.members-list span'); 
     $(openLink).click(function() { 
      var index = $(this).data('markerIndex'); 
      infoWindow.setContent(gmarkers[index].infWinCont); 
      infoWindow.open(map, gmarkers[index]); 
     }); 
    }); 

})(jQuery); 

function initGmap() 
{ 
    var mapCanvas = document.getElementById('map'); 
    var mapLatlng = new google.maps.LatLng(50.5692828655824, 10.01953125); 
    var mapOptions = { 
     center: mapLatlng, 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(mapCanvas, mapOptions); 
    map.minZoom = 3; 
    infoWindow = new google.maps.InfoWindow(); 
    // mapData and mapDataCount are loaded from a separate file 
    for (var i = 0; i < mapDataCount; i++) { 
     var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lon); 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      infWinCont: mapData[i].infWin, 
     }); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent(marker.infWinCont); 
       infoWindow.open(map, marker); 
      }; 
     })(marker, i)); 
     gmarkers.push(marker); 
    } 
    var markerCluster = new MarkerClusterer(map, gmarkers); 
} 

Answer 1

之前標記添加到地圖中你可以這樣做：

infoWindow.setPosition(gmarkers[index].getPosition()); 

Answer 2

信息窗口可以給自己的定位：

var latlng = {lat: -25.363, lng: 131.044}; 
    var infowindow = new google.maps.InfoWindow({ 
    position: latlng, 
    content: 'content in here' 
    }); 

您也可以撥打上的setPosition信息窗口以編程方式移動它。

https://developers.google.com/maps/documentation/javascript/infowindows#open

Answer 3

一個選項是打開信息窗口

var index = $(this).data('markerIndex'); 
gmarkers[index].setMap(map); 
// center and zoom on the marker so it remains unclustered 
map.setCenter(gmarkers[index].getPosition()); 
map.setZoom(18); 
// programmatically "clicking" on the marker opens the infowindow. 
google.maps.event.trigger(gmarkers[index], 'click'); 

proof of concept fiddle