JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<section id="google-map">
  <div id='location-canvas' style='width:100%;height:300px;'>
  </div>
  <div class="over-map">
  </div>
</section>

CSS

#google-map {
    margin-top: 42px;
	position: relative;
}

.over-map { position: absolute; width: 100%; height: 100%; background-color: transparent; top: 10px; right: 10px; z-index: 99; }

JavaScript

function initialize() {
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(49.192196,18.733228),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('location-canvas'),
              mapOptions);

      var marker = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(49.192196,18.733228)
      });
    }

    google.maps.event.addDomListener(window, 'resize', initialize);
    google.maps.event.addDomListener(window, 'load', initialize)
    
    $(document).ready(function(){
        initialize();

    // vytvoríme si objekt nášho magického divu
    var magicDiv = $('.over-map');
    
    // vytvorime si objekt mapy
    var magicMap =  $('#location-canvas');
   
    /* nabindujeme si klik, tj... ak klikneme na tento magicky 
       div ktory prekryje mapu, tak sa skryje  */
    magicDiv.click(function(){
      $(this).hide();
    });

    /* nabindujeme si odchod mysky z mapy, tj... ak mys opusti mapu 
       , div ktory prekryje mapu sa znova zobrazi  */
    magicMap.mouseout(function(){
       magicDiv.show();
    });
        
    /* Fix pre dotykové obrazovky */      
    magicMap.bind('touchend', function(){
      $('.over-map').show();
    })
    
});