Google Maps Marker Clusterer - Verwendung von infoWindow mit einem Standortindex

Question

Ich habe eine Google Map, die einen Standortindex darunter verwendet, sodass Benutzer auf einen Standortnamen klicken können und das InfoWindow für diesen Standort auf der Karte erscheint.

Ich verwende auch Marker Clusterer v3. Wenn Sie im Moment auf ein Element im Index klicken, wird das InfoWindow für Objekte in einem Cluster in der oberen linken Ecke der Karte eingeblendet.

Wie kann ich das infoWindow an der richtigen Stelle erscheinen lassen? Hier

ist der Code, den ich so weit bin mit:

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

Sie können nur das tun, öffnen:

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

Answer 2

Die Infowindow seine eigene Position gegeben werden kann:

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

Sie können auch setPosition auf dem Infofenster nennen es programmatisch zu bewegen .

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

Answer 3

Eine Möglichkeit ist, den Marker auf der Karte hinzuzufügen, bevor das Infofenster

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