JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<ul class="menu">
    <li class="clear"><a href="#">CLEAR</a></li>      
    <li class="edit"><a href="#">EDIT</a></li>  
    <li class="draw"><a href="#">DRAW</a></li> 
</ul>

<section id="placeholder">
    <div id="map" ></div>
</section>

CSS

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#placeholder{
    width: 100%;
    height: 100%;  
    
}


ul.menu{
    list-style-type:none;
    background: grey;
    margin:0;
    overflow:hidden;
}

ul.menu li{
    background: #333333;
    float:left;
    padding: 5px;
    margin-right:2px;
}

ul.menu li a{
    text-decoration: none;
    font-size: 11px;
    color: #ffffff;
}

JavaScript

var googleMapApp = {
    newShape: "",
    markers: "",
    map: "",
    setAllMap: function(map) {
        for (var i = 0; i < this.markers.length; i++) {
            this.markers[i].setMap(map);
        }
    },
    clearMarkers: function() {
        this.setAllMap(null);
    },
    showMarkers: function() {
        this.setAllMap(map);
    },
    setMarkers: function(map, locations) {
        // Add markers to the map
        
        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.
        
        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.
        var image = {
            url: 'http://www.dirtbikerider.com/tmx/images/markers/marker0.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
        };
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };
        for (var i = 0; i < locations.length; i++) {
            var beach = locations[i];
            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                shape: shape,
                title: beach[0],
                zIndex:...