JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map-canvas"></div>
<div id="sidebar"></div>

CSS

#map-canvas{
    width: 100%;
    height: 400px;
    right: 0;
    position: absolute;
}

#sidebar{
    width: 50%;
    left: -50%;
    height: 400px;
    background:red;
    position:absolute;
 }

JavaScript

var map;
var oldCenter;

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910)
};
map = new google.maps.Map($('#map-canvas')[0],myOptions);
                  
google.maps.event.addListener(map, "click", function(event) { 
     oldCenter = map.getCenter();
     if($("#map-canvas").width() < $(window).width()){
            $("#map-canvas").css("width", "100%");
            google.maps.event.trigger(map, 'resize');    
            map.setOptions({center: oldCenter}); 
            $("#sidebar").animate({left: "-" + 50 + "%"}, 500)
     }else{           
          $("#sidebar").animate({left:0}, 500, function(){
              $("#map-canvas").css("width", "50%");                    
              google.maps.event.trigger(map, 'resize');
              map.setCenter(oldCenter);
          });    
     };                        
});