$(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(); }); });
<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>
#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); }