JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.css">
<a href="#" class="btn-show">Show</a>

<div id="mapI">
    <a href="#" class="btn-hide"></a>
    <div id="Gmap"></div>
</div>

CSS

body { margin:0; padding:0; background-color: #ddd; }
.btn-show {
    margin: 2px;
    padding: 5px 10px;
    color: #fff;
    background-color: #f00;
    text-decoration: none;
}
#mapI {
    display: none;
    width: 300px;
    height: 300px;
    padding: 15px;
    left: 50%;
    top: 50%;
    margin-top: -165px;
    margin-left: -165px;
    position: fixed;
    background-color: #FFF;
    z-index: 100;
}
.btn-hide {
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 31px;
    height: 31px;
    background: url(http://www.lapasserelle-massage.fr/img/ex.png) 0 0 no-repeat;
}
#Gmap {
    /* display: none; */
    width:100%;
    height: 100%;
}

JavaScript

var map = null;

function loadMap() {
   if($('#Gmap').length){
       map = L.mapbox.map(
           'Gmap', 
           'silencesim.ghhp80b9', 
           { zoomControl: false }
       ).setView([43.53322, 5.44691], 16);
    }
}

function showMap(){
    $("#mapI").show(0);
    
    if (!map) {
        loadMap();
    } else {
        map.invalidateSize()
    }
}

function hideMap(){
    $("#mapI").hide(0);
}

$('.btn-show').click(function(e){
    e.preventDefault()
    showMap()
})

$('.btn-hide').click(function(e){
    e.preventDefault()
    hideMap()
})