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务必小心 。