Google Maps Marker Clusterer - Как использовать infoWindow с индексом местоположения

Question

У меня есть карта google, которая использует индекс местоположения под ним, поэтому пользователи могут щелкнуть по имени местоположения, и на карте появится информация об этом месте для этого местоположения.

Я также использую Marker Clusterer v3. В данный момент щелчок по элементу в индексе вызывает всплывающее окно 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

InfoWindow можно дать свою собственную позицию:

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

Вы также можете позвонить SetPosition на InfoWindow, чтобы переместить его программно ,

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

Answer 3

Один из вариантов, чтобы добавить маркер на карте, прежде чем открыть InfoWindow

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