Google地圖-無法在我的樣式地圖中單擊標記

Question

我一直在尋找一種添加100％寬度和特定地圖的方法，該地圖具有一些樣式並顯示地址標記。

我找到了Google Maps APIs頁面提供的示例（ https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple ），並對其應用了一些樣式。 如果我獲得了Google的完整代碼並將其保存在自己的html文件中，那么它將非常完美。 但是，當我將此代碼發送到我的完整頁面時，它不會讓我單擊標記！

這是我現在用於測試的地址： http : //uno.ag/contato5.html

有什么想法嗎？

先感謝您！ ;）

function initialize() {
  var myLatlng = new google.maps.LatLng(-23.582423, -46.641885);
  var mapOptions = {
    zoom: 16,
    center: myLatlng,
    styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
  };

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

  var contentString = '<div id="content" style="margin-left:15px;margin-top:5px;margin-bottom:15px;margin-right:5px;">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<br /><br /><img src="http://uno.ag/img/logo-top.png"><br /><br />'+
      '<div id="bodyContent">'+
      'Rua Ambrosina de Macedo, 174 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />' +
      'CEP 04013-030 <br /> '+
      '(11) 5579 2062 '+
      '</div>'+
      '</div>';

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

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      optimized: true,
      clickable: true,
      title: 'UNO+BRAND'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

wrapper div位於其頂部，使其難以舔。 您會注意到您也無法移動地圖，除非您在側面嘗試。 如果您F12，並設置display:none; 在div#wrapper您會看到它正常工作。

Answer 2

在檢查代碼時，問題似乎出在#wrapper容器上。

<div id="wrapper">
....
</div>

刪除它，標記就會變為可點擊狀態。

更新：

我建議刪除height: auto !important; 在您的#wrapper樣式中，這將解決問題，而不是設置z-index並且在使用!important務必小心 。