出現在 div 之外的下拉菜單

Question

我想在我的 google map api 的信息窗口內放置一個按鈕下拉菜單，但是，當我單擊按鈕激活下拉菜單時，它出現在信息窗口內而不是外，這使得信息窗口可滾動。

信息窗口代碼：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 
      `<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>`;

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

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

這是一個演示： https : //jsfiddle.net/zr52yo18/

我希望下拉菜單出現在信息窗口之外。

Answer 1

添加以下 CSS，它將起作用。

div.gm-style-iw {
  overflow: visible !important;
  padding: 20px !important;
}
div.gm-style-iw-d{
  overflow: visible !important;
}

這是演示： https : //jsfiddle.net/gxay38dz/