JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>

<body onload="initialize();">
    <div id="container">
        <div id="nav">Nav Menu</div>
        <div id="map"></div>
    </div>
</body>

CSS

html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #container { width: 100%; height: 100% }
  #nav { z-index: 100; position: absolute; margin: 10px 0px 0px 200px; background-color: #fff; border: 1px #000 Solid; padding: 5px; }
  #map { width: 100%; height: 100% }

JavaScript

function initialize() {
    var mapOptions = {
            center: new google.maps.LatLng(40.435833800555567, -78.44189453125),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 11
          };	 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
};