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);

Can you create a jsfiddle at http://jsfiddle.net – Akshay Khandelwal Feb 01 '14 at 17:55 — Akshay Khandelwal, Feb 01 '14 at 17:55

score 1 · Accepted Answer · answered Feb 01 '14 at 18:10

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.

answered Feb 01 '14 at 18:10

MisterIsaak

3,882
6
32
55

OMG JIsaak, it was it!!! thank you so much! lost more than 2 hours trying to figure it out!! =] – paulocholla Feb 01 '14 at 18:14

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

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.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 01 '14 at 18:14

Praveen

55,303
33
133
164

1

thank you, Praveen. just added a simple z-index to the map div and it all worked! i've never used Google Maps API before, i tought it was something very hard i couldn't figure out. but it was just a dumb mistake hehehe. ;) – paulocholla Feb 01 '14 at 18:18

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

2 Answers2