Persistent Navbar Not Working When Google Maps Are On The Same Page

Persistent Navbar Not Working When Google Maps Are On The Same Page

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. 

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.

I'd appreciate any thoughts you may have on the problem.

Terran

Javascript
  1.     $(function () {
  2.         // To fix the google map display issue
  3.         // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
  4.         // http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
  5.         // Wek Kit Browser Version Of Code
  6.         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/)) {
  7.             var mapheight = $(window).height() - 263;
  8.             var mapwidth = $(window).width();
  9.             $("#map").height(mapheight);
  10.             $("#map").width(mapwidth);
  11.             setTimeout("initializeeventsmap()", 150);
  12.             setTimeout("google.maps.event.trigger(map, 'resize')", 350);
  13.             //setTimeout("map.setZoom( map.getZoom() )", 170);
  14.             setTimeout("showResultmapjsonp()", 250);

  16.         } else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
  17.             // PC Version Of Code
  18.             var mapheight = $(window).height();
  19.             var mapwidth = $(window).width();
  20.             $("#map").height(mapheight);
  21.             $("#map").width(mapwidth);
  22.             setTimeout("initializeeventsmap()", 150);
  23.             setTimeout("google.maps.event.trigger(map, 'resize')", 350);
  24.             //setTimeout("map.setZoom( map.getZoom() )", 170);
  25.             setTimeout("showResultmapjsonp()", 250);
  26.         };

HTML
  1.        <div data-role="page" id="eventmap" data-theme="d">
  2.             <div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
  3.                 <div id="androidnavmenumain3" data-role="navbar" data-theme="d">
  4.                     <ul>
  5.                         <li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>

  7.                         </li>
  8.                         <li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>

  10.                         </li>
  11.                         <li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>

  13.                         </li>
  14.                         <li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>

  16.                         </li>
  17.                         <!-- <li>
  18.                             <a href="#home" data-theme="d" data-icon="androidmore"> </a>
  19.                         </li> -->
  20.                     </ul>
  21.                 </div>
  22.             <!-- <div id="androidnavmenu2" data-role="button" data-mini="true" data-icon="refresh"
  23.             data-iconpos="notext" class="ui-btn-right" data-transition="fade" data-theme="d"
  24.             style="border-width: 0px 0px 0px 0px;">Refresh Data</div> --></div>
  25.         <!--<div id="eventscontent" data-role="content" align="center"> -->
  26.         <!--<p>&nbsp;</p> -->
  27.         <div id="map" style="width:100%%; height:100%%;"></div>
  28.         <div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
  29.         data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
  30.             <div class="ui-block-a">
  31.                 <div id="followme" data-role="button" data-transition="fade" data-theme="d"
  32.                 data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
  33.             </div>
  34.             <div class="ui-block-b">
  35.                 <div id="centermap" data-role="button" data-transition="fade" data-theme="d"
  36.                 data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
  37.             </div>
  38.         </div>