Energ Energ - 3 months ago 22
CSS Question

CSS button over google map not clickable

I'm using Google Map Javascript Api to put a map on my website.

I created a button on the top right corner of the map just so the user could close it

This is my CSS button code:


#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}


I used jQuery to put it inside the #map div

$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});


and I have jQuery code to hide the map when I'm clicking on it

So I can see the button on the corner but it's not clickable

Answer

you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.

<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>

now you can add some jquery to close the testing-div

 $("#close-map").click(function(){
    $(".testing-div").slideUp();
});
Comments