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="btn container" id="info">KML Info</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: 50px;
    
    background-color: #444;
    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();