JSFiddle - React, Tailwind, and code Playground

by SaulBurgos

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3.13&amp;amp;libraries=geometry,places&amp;amp;sensor=false"></script>
<div id="mapPage" data-role="page" >

            <div data-theme="b" data-role="header" data-position="fixed" >
				<a id="" href="#" data-role="button" data-iconshadow="false"
				 data-transition="pop" data-rel="popup"  data-position-to="window">
					options
				</a>
				
			    <div id="searchArea">
			      <input id="searchAddressInput" type="search" name="search" value="" 
			      data-mini="true" placeholder="location"
			       data-theme="c" class="search-header" />
				</div>
				
				<a id="showList" href="#" data-role="button" data-iconshadow="false">
					list of items
				</a>
				
            </div>
			
			<div id="googleMap" data-role="content" style="height:100%;"></div>	

			<div id="overlayList">
				<div>
					<ul data-role="listview">
                			<li><a href="#">Acura</a></li>
                            <li><a href="#">Audi</a></li>
                            <li><a href="#">BMW</a></li>
                            <li><a href="#">Cadillac</a></li>
                            <li><a href="#">Ferrari</a></li>			
					</ul>
				</div>
			</div>

        </div>

CSS

#searchArea {
	width: 35%;
	margin: 0px auto;	
}

#overlayList {
	display: none;
	position: fixed;
  	bottom: 0;
	right: 0;
	width: 100%;
  	max-height: 300px;
	overflow: hidden;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0px -1px 30px 3px rgba(0, 0, 0, 0.74);
	-webkit-box-shadow: 0px -1px 30px 3px rgba(0, 0, 0, 0.74);
	-ms-box-shadow: 0px -1px 30px 3px rgba(0, 0, 0, 0.74);
	-moz-box-shadow: 0px -1px 30px 3px rgba(0, 0, 0, 0.74);
}

JavaScript

$(document).ready(function() {
    /*start resize body*/
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - 
    		$(this).find('[data-role="footer"]').height());

    	the_height = the_height - $(this).find('[data-role="header"]').height();  		
   		$(this).height(the_height);
   		$(this).find('[data-role="content"]').height(the_height);
    /***end resize body***/
    var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
   var map = new google.maps.Map(document.getElementById("googleMap"),  mapOptions);
    /*hide overlya list*/
    google.maps.event.addListener(map, 'click', function() {
			var list = $("#overlayList");
			if(list.is(":visible")) {
				list.slideToggle('fast');
			}
    });
    
    $('#showList').on('click',function() {			
		$("#overlayList").slideToggle();
	});
     
});