Home/ Questions/Q 8681813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T21:36:23+00:00

I’m writing an application on Android using PhoneGap and i want map to be

  • 0

I’m writing an application on Android using PhoneGap and i want map to be 100% width and height of the screen. The problem is that all of DOM elements like divs are not displayed above my map when i’m running the app on android device. E.g. popups are triggered but they’re under map canvas (setting high z-index doesn’t help).

While running on browser (FF, Chrome) evrything works fine. Is it problem with Android default browser? Does anyone know how to solve this?

Example:

<a href="" data-role="button">button</a>

I can’t make this simple JQM button display above the map.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So the solution is to be careful about order of including js/css files. So if you’re writing an app using JQM, google-maps-api and phone gap you should remember:

    First include css files e.g
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

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

    After that the jquery .js file
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

    Next jquery ui map files like
    <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>

    And at last jquery mobile script file (I think this is where I made mistake)

    <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>

    • 0