JSFiddle - React, Tailwind, and code Playground

by pratie

HTML

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

<div id="wrapper">
<div id="map_canvas" style="width:100%; height:100%"></div>


<div id="over_map">
        <p>Select something!</p>
            <select>
                        <option value="Red">Red</option>
                        <option value="Green">Green</option>
                        <option value="Blue">Blue</option>
            </select>
        </div>

</div>

CSS

html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { position: absolute; top: 10px; left: 10px; height: 100%; width: 100%; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }

JavaScript

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

Y.on("domready", function(){
     initialize();   
})