Energ Energ - 1 month ago 7x
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


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>

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