Infowindowがマーカークラスタに表示されていません

Question

マーカーがクリックされたときにマーカークラスタにinfowindowを表示しようとしていますが、機能していません。

フィドル：https://jsfiddle.net/302j8csd/3/

var markers = locations.map(function(location, i) { 

     var marker = new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
     }); 

     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

     return marker; 
     }); 

誰も私を助けることができますか？

Answer 1

あなたはCSSを通じてマップの高さと幅を与える必要があり、

ここに完全なコードは、

されるHTML

<div id="map-view"></div> 

CSS

#map-view{ 
    height:500px; 
    width:500px; 
} 

のJS

$(document).ready(function(){ 
    initialization() 
}); 

function initialization() { 

     var map = new google.maps.Map(document.getElementById('map-view'), { 
     zoom: 3, 
     center: {lat: 19.317779, lng: -91.459656}, 
     mapTypeId: 'roadmap', 
     }); 
     map.setTilt(45); 


     var labels = 'KLMNOPQRS'; 

     var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h2 id="firstHeading" class="firstHeading">BMW 7 Series</h2>'+ 
      '<div id="bodyContent">'+ 
      '<p>Details goes here</p>' + 
      '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
     }); 


     var markers = locations.map(function(location, i) { 

     var marker = new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
     }); 

     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

     return marker; 
     }); 


     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 

var locations = [ 
{lat: 12.7781453358752, lng: -82.3715011598119}, 
{lat: 44.0026085052726, lng: -81.4873632217882}, 
{lat: 74.0086085052726, lng: -81.6873632217882} 
];