I would like to display Google maps in my app and as many people have found there are problems in doing this. To over come it I refresh the map when the app has loaded hence the javascript.
Further more I have set it to 100% so that the menu looks slightly transparent like an Android app. This same menu structure works fine else where in the app except the page with Google maps on it.
When on the maps page I am unable to select any of the menu buttons in the nav bar and there for navigate away.... my footer still works.
I did think it was some thing to do with Google taking over the screen so I have even tried changing the z-index of the divs with no luck.
The reason for this thinking was that moving the mouse over the menu shows ( using Chrome ) the correct link but for what ever reason the actual touch / click event is not be captured and actioned as a result.
For reference I am using jquery-1.8.2 & jquery.mobile-1.2.0
Javascript
$(function () {
// To fix the google map display issue
// https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
// http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
// Web Kit Browser Version Of Code
if (navigator.userAgent.match(/Android/) || navigator.userAgent.match(/webOS/) || navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/BlackBerry/)) {
var mapheight = $(window).height() - 263;
var mapwidth = $(window).width();
$("#map").height(mapheight);
$("#map").width(mapwidth);
setTimeout("initializeeventsmap()", 150);
setTimeout("google.maps.event.trigger(map, 'resize')", 350);
//setTimeout("map.setZoom( map.getZoom() )", 170);
setTimeout("showResultmapjsonp()", 250);
} else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
// PC Version Of Code
var mapheight = $(window).height();
var mapwidth = $(window).width();
$("#map").height(mapheight);
$("#map").width(mapwidth);
setTimeout("initializeeventsmap()", 150);
setTimeout("google.maps.event.trigger(map, 'resize')", 350);
//setTimeout("map.setZoom( map.getZoom() )", 170);
setTimeout("showResultmapjsonp()", 250);
};
HTML
<div data-role="page" id="eventmap" data-theme="d">
<div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
<div id="androidnavmenumain3" data-role="navbar" data-theme="d">
<ul>
<li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>
</li>
<li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>
</li>
<li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>
</li>
<li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>
</li>
<!-- <li>
<a href="#home" data-theme="d" data-icon="androidmore"> </a>
</li> -->
</ul>
</div>
<!-- <div id="androidnavmenu2" data-role="button" data-mini="true" data-icon="refresh"
data-iconpos="notext" class="ui-btn-right" data-transition="fade" data-theme="d"
style="border-width: 0px 0px 0px 0px;">Refresh Data</div> --></div>
<!--<div id="eventscontent" data-role="content" align="center"> -->
<!--<p> </p> -->
<div id="map" style="width:100%%; height:100%%;"></div>
<div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
<div class="ui-block-a">
<div id="followme" data-role="button" data-transition="fade" data-theme="d"
data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
</div>
<div class="ui-block-b">
<div id="centermap" data-role="button" data-transition="fade" data-theme="d"
data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
</div>
</div>
