Google Maps - can't click on marker in my styled map

Question

i've been looking for a way to add a 100% width and specific map, that has some styling on and shows the marker for the address.

i found an example that Google Maps APIs page provides ( https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple ) and applied some styles to it. if i get Google's entire code and save it in it's own html file, it works prefect. however, when i send this code to my complete page, it won't let me click on the marker!

this is the address i'm using for testing now: http://uno.ag/contato5.html

any ideias?

thank you in advance! ;)

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

Your wrapper div is on top of it, making it unlickable. You'll notice you can't move the map either, unless you try on the sides. If you F12, and set display:none; on div#wrapper you'll see it works just fine.

Answer 2

On inspecting your code, it seems the problem is you #wrapper container.

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

remove it and the marker becomes clickable.

Updates:

I would suggest to remove height: auto !important; in your styles of #wrapper this will fix the problem rather than setting the z-index and always be careful in using !important.