JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="container">
<div id="left"><p>show map</p></div>
<div id="Grid">
    <div id="map-canvas"></div>
</div>
</div>

CSS

html {
    height: 100%;
}

#container {
    opacity:0;
}

}
body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0
}
#map-canvas {
    height: 100px;
}
#Grid {
    float:right;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-top:20px solid orange;
    border-bottom:20px solid orange;
    border-right:10px solid orange;
    border-left:10px solid orange;
    background:green;
    margin-bottom:0px;
}
#left {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    width:170px;
    border:20px solid red;
    background:blue;
}
#middle {
    position:fixed;
    left:170px;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-right:10px solid blue;
    border-top:20px solid blue;
    border-bottom:20px solid blue;
    background:yellow;
}
@media only screen and (min-width : 100px) and (max-width : 768px) {
    #Grid {
        float:left;
        margin-bottom:1px;
        margin-left:170px;
        border-left:0px solid red;
    }
 
}

JavaScript

$('#map-canvas').hide();

  $('#left p').click(function(){
$('#map-canvas').show();
             initialize();

  });



    $('#Grid').css('width', '100%').css('width', '-=170px');


var map; //<-- This is now available to both event listeners and the initialize() function

var fauburg = new google.maps.LatLng(48.873562048, 2.35491002);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {
     var featureOpts = [
  {
    "stylers": [
      { "invert_lightness": true },
      { "saturation": -100 }
    ]
  }
];
    
    
  var mapOptions = {
     zoom: 18,
    center: fauburg,
  disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
      mapTypeId: MY_MAPTYPE_ID
  };
    
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
 
    var marker = new google.maps.Marker({
      position: fauburg,
      map: map
      
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(fauburg); 
});