JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
<div class="btn-group" id="kml-dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Select KML
    <span class="caret"></span>
  </a>

    <ul class="dropdown-menu"> <a href="#"></a>

    </ul>
</div>
<div class="well container pull-left" id="info">
    <p>list out the route info here</p>
    <ul>
        <li>Lorem ipsum, dolor sit</li>
        <li>Lorem ipsum, dolor sit</li>
        <li>Lorem ipsum, dolor sit</li>
        <li>Lorem ipsum, dolor sit</li>
    </ul>
</div>

CSS

html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#kml-dropdown {
    position: fixed;
    top: 0;
    width: 100%;
}
#kml-dropdown .btn {
    width: 100%;
}
#info {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #fafafa;
    cursor: default;
}
#info:hover, #info:focus {
    background-position: 0;
}

JavaScript

function initialize() {
    var chicago = new google.maps.LatLng(41.875696, -87.624207);
    var mapOptions = {
        zoom: 11,
        center: chicago,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

initialize();