JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-blue.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar"> <a href="#listings-panel" class="mdl-tabs__tab is-active">Listings</a>
 <a href="#map-panel" class="mdl-tabs__tab map-tab">Map View</a>
 <a href="#compare-panel" class="mdl-tabs__tab">Compare Selections</a>

    </div>
    <div class="mdl-tabs__panel is-active" id="listings-panel"></div>
    <div class="mdl-tabs__panel" id="map-panel">
        <div id="map"></div>
    </div>
    <div class="mdl-tabs__panel" id="compare-panel"></div>
</div>

CSS

.gm-style img {
    max-width: none;
}
.gm-style label {
    width: auto;
    display: inline;
}
body {
    font-family: sans-serif;
    background: #eee;
}
a, h1, h2 {
    color: #377ba8;
    text-decoration: none;
}
h1, h2 {
    font-family:'Georgia', serif;
    margin: 0;
}
h1 {
    border-bottom: 2px solid #eee;
}
h2 {
    font-size: 1.2em;
}
fieldset {
    /*float: left;*/
    clear: both;
    width: 100%;
    margin: 0 0 -1em 0;
    padding: 0 0 1em 0;
    border-style: none;
    border-top: 1px solid #BFBAB0;
    /*background-color: #F2EFE9;*/
}
legend {
    margin-left: 1em;
    color: #000000;
    font-weight: bold;
}
legend span {
    /*position: absolute;*/
    /*margin-top: 0.5em;*/
    /*font-size: 135%;*/
}
fieldset ol {
    padding: 0 0 0 2em;
    list-style: none;
}
ul {
    padding: 0 1em 0 1em;
    list-style: none;
}
fieldset li div {
    float: left;
    clear: left;
    width: 100%;
    padding-bottom: 1em;
}
fieldset.submit {
    float: none;
    width: auto;
    border: 0 none #FFF;
    padding-left: 12em;
}
label {
    float: left;
    width: 10em;
    margin-right: 1em;
    text-align: right;
}
img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
}
td {
    border: 1px;
}
.page {
    margin: 2em auto;
    width: 65em;
    /*border: 5px solid #ccc;*/
    /*padding: 0.8em;*/
    background: white;
}
.mdl-layout__content {
    background: white;
}
.entries {
    list-style: none;
    margin: 0;
    padding: 0;
}
.entries li {
    margin: 0.8em 1.2em;
}
.entries li h2 {
    margin-left: -1em;
}
.add-entry {
    font-size: 0.9em;
    border-bottom: 1px solid #ccc;
}
.add-entry dl {
    font-weight: bold;
}
.metanav {
    /*text-align: right; font-size: 0.8em;*/
    padding: 0.3em;
    margin-bottom: 1em;
    background: #fafafa;
}
.flash {
    background: #cee5F5;
    padding: 0.5em;
    border: 1px solid #aacbe2;
}
.error {
    background: #f0d6d6;
    padding: 0.5em;
}
#map {
    width: auto;
  ...

JavaScript

$(function () {
    $('.map-tab').click(function () {
        initialize();
    })
});

function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    setTimeout(function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(mapOptions.center);
    }, 500);
}