JSFiddle - React, Tailwind, and code Playground

by alga noto

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;
    height:100%;
    width:100%;
}

body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0
}
#map-canvas {
    height:100%;
}
#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();

$("#container").delay(1000).animate({
    opacity: 1

}, 2000);



$('#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); 
});


function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}