jquery-ui-map with new version of jquery mobile and jquery

Question

I am upgrading an old hybrid application with the latest versions of jQuery (1.7 -> 2.2.4) and jQuery Mobile (1.1 -> 1.4.5).
This app contains a page with a map created with jquery-ui-map.
Now I'm testing the app with PhoneGap and the page containing the map is empty, do not show anything and there aren't errors to the console.
In all the examples that I found on the internet, they are used previous versions of jquery.

1. jquery-ui-map can also be used for the latest versions of jquery?
2. Could be a problem of Phonegap? If I create an apk, I can see the map?
3. Is better if I use another code to create a map?

Here's the code:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js">  </script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=KEY"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
$(document).on('pagecreate',function(){
setTimeout(function(){
    $.mobile.loading('hide');
},500);     
});


$(function(){

$.mobile.loading( 'show', {
    text: '',
    textVisible: false,
    theme: 'a',
    html: ""
});

$('#map-canvas').gmap({'center':'1111,0000','zoom':10}).on('init',function(){ // coordinates example
    var Link = "http://google.com"; // Example
    $.getJSON(link, function(data){
        ....
    }); 

});

});
</script>

Thank you so much.

Answer 1

Solution:
1. Use function canvasHeight written by Omar before map's loading (Is there a way to preload google map with jquery mobile?)
2. Replace function bind with one to initialize the map.

Code:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
 <script type="text/javascript" src="js/jquery.ui.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=KEY"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
$(document).on('pagecreate',function(){
 setTimeout(function(){
     $.mobile.loading('hide');
 },500);     
});


$(function(){

 $.mobile.loading( 'show', {
    text: '',
    textVisible: false,
    theme: 'a',
    html: ""
 });

 canvasHeight("#map-canvas");

 $('#map-canvas').gmap({'center':'1111,0000','zoom':10}).one('init',function(){ // coordinates example
var Link = "http://google.com"; // Example
  $.getJSON(link, function(data){
    ....
  }); 

 });

});

function canvasHeight(canvas) {
var canvasPage = $(canvas).closest("[data-role=page]").length !== 0 ? $(canvas).closest("[data-role=page]") : $(".ui-page").first(),
    screen = $.mobile.getScreenHeight(),
    header = $(".ui-header", canvasPage).hasClass("ui-header-fixed") ? $(".ui-header", canvasPage).outerHeight() - 1 : $(".ui-header", canvasPage).outerHeight(),
    footer = $(".ui-footer", canvasPage).hasClass("ui-footer-fixed") ? $(".ui-footer", canvasPage).outerHeight() - 1 : $(".ui-footer", canvasPage).outerHeight(),
    newHeight = screen - header - footer;
$(canvas).height(newHeight);
$(canvas).width($(window).width());
}
</script>

Thanks Omar :)