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.

Which version is compatible? On the official website, there is only 3.x version, is it correct? — Giu, Apr 10 '17 at 14:56
Thank you, now I have changed the version of jquery but the problem isn't solved. — Giu, Apr 10 '17 at 15:18
load map on `pagecontainershow` event http://stackoverflow.com/questions/21997604/jquery-mobile-google-maps-showing-intermittently/22001257#22001257 — Omar, Apr 10 '17 at 16:04
Preload google map: http://stackoverflow.com/a/21779195/1771795 — Omar, Apr 10 '17 at 16:09
Thank you Omar but I would like to use gmap, is it possible? Or is better if I use Google Maps code? If I use Google maps I must to change a lot of code in my app. Anyway, I've tried your example and from browser it works, but with Phonegap I don't see the map. It doesn't return any errors. — Giu, Apr 11 '17 at 07:45
Same concept, run gmap code on `pagecontainershow`. give map canvas height and width. I don't know about phonegap. — Omar, Apr 11 '17 at 08:03
Solved! 1. I use your function "canvasHeight" 2. I replaced the function "bind" width "one" to initialize the map. But there is a small problem.. with Phonegap show "We are sorry, there are no images available for this region". Do you know something about this error? — Giu, Apr 11 '17 at 08:34
Good! don't forget to post an answer. I'm not experienced in phonegap, sorry :) — Omar, Apr 11 '17 at 08:53

score 1 · Accepted Answer · edited May 23 '17 at 12:17

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 :)

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

1 Answers1