JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?libraries=geometry&amp;amp;sensor=false"></script>
<div id="mapCanvas" class="mapCanvas"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.mapCanvas {
           width: 100%;
           /* When i set it to 100%, Map goes BLANK */
           height: 100%;
       }
       .mapContainer {
           display:inline-block;
       }
       .mapContainer div, .mapContainer ul {
           float:left;
       }
       .infoWindow h1 {
           font-size: 1.6em;
           text-align: center;
           padding-bottom: 1px;
       }
       .infoWindow {
           overflow: hidden;
       }

JavaScript

markers = [];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(51.061150138439515, -114.05261809049074),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADTYPE,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

    var marker0 = new google.maps.Marker({
        position: new google.maps.LatLng(51.063838646941576, -114.05572414398193),
        map: map,
        icon: "http://www.earthpoint.us/Dots/GoogleEarth/paddle/ylw-blank.png"
    });
    markers.push(marker0);
    var infowindow0 = new google.maps.InfoWindow({
        content: "<div class='infoWindow'><h1> We are here </h1></div>",
        maxWidth: 350
    });
    google.maps.event.addListener(marker0, "click", function () {
        infowindow0.open(map, marker0);
    });

}
google.maps.event.addDomListener(window, "load", initialize);