JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://oridomi.com/oridomi.min.js"></script>
<body>
    <div id="map_wrap">
    <div id="map"></div>
    <div id="static_map"></div>
    </div>    
</body>

CSS

#map,#static_map,#map_wrap{
 width:300px;
    height:300px;
    position:absolute;
}
#map{z-index:9999;opacity:0}

JavaScript

//init map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(51.475399, 31.840964),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
}   
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//set static map url
 $('#static_map').css({'opacity':'1','background-image':  getStaticUrl(map)});

//init oridomi
var $oridomi =  $('#static_map').oriDomi();
$oridomi.oriDomi('accordion', 50);

//unfold map on mouseenter
$('#map_wrap').mouseenter(function(){
    $oridomi.oriDomi('accordion', 0, function(){    
        $('#static_map').css('opacity','0');
        $('#map').css('opacity','1');    
    });
//fold map on mouseleave                                                         
}).mouseleave(function(){
    $('#static_map').css({'opacity':'1','background-image':  getStaticUrl(map)});
    $('#map').css('opacity','0');
    
    $oridomi.oriDomi('accordion', 50);
})

//get url for a static map on the basis of current state of google map
function getStaticUrl(map){
 return "url(http://maps.googleapis.com/maps/api/staticmap?"
                    + "center="+map.getCenter().toUrlValue()
                    + "&zoom="+map.getZoom()
                    + "&size=300x300)";
}