jQuery Mobile don't' execute function after pageshow - json

Question

I have in my Phonegap app this JQM; I create a Google map and I load markers from json file.
When i launch page2, i see the first console.log (coordinates) and the last console.log (2222222) - The intermediate console.log that contains numberOfElements is displays only the first time. If I see the map and i return back the whole script isn't loaded.
Why?
$(document).on('pageshow', '#page2', function () {
var latnow = Number(localStorage.getItem("lat"));
var lngnow = Number(localStorage.getItem("lng"));
var coordinate = new google.maps.LatLng(latnow, lngnow);
console.log(latnow + ' ' + lngnow);
$('#map_canvas').gmap({
'center': coordinate,
'disableDefaultUI': true,
'zoom': 5,
'scrollwheel': false,
'panControl': false
});
$('#map_canvas').gmap().bind('init', function () {
var images = "img/icon.png";
var images2 = "img/icon2.png";
$.getJSON('http://www.site.com/app/json.php?lat=' + latnow + '&lat=' + lngnow + '', function (data) {
var myObject = data;
var numberOfElements = data.markers.length;
console.log(numberOfElements); // <- !!!!!!
if (numberOfElements == 0) {
alert("no result");
$.mobile.changePage("#home");
}
var myObject = JSON.stringify(myObject);
localStorage.setItem("json_near", myObject);
$('#map_canvas').gmap('addMarker', {
'position': coordinate,
'icon': images2,
'bounds': true
});
//marker da json
$.each(data.markers, function (i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'draggable': false,
'bounds': true,
'icon': images
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content,
'maxWidt': 200,
'maxHeight': 400,
'autoScroll': true
}, this);
});
});
});
});
map_element = document.getElementById("map_canvas");
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map_element, 'resize');
console.log("2222222");
});

Answer 1

I assume you are using this plugin - http://code.google.com/p/jquery-ui-map/ , right?
I think it is not a problem of jquery mobile. The pageshow event is called as you can see from those console.log messages.
Try to stick console.log("xxx") into the gmap init handler. I think this is the one which is NOT called at the second time.
Something like
$('#map_canvas').gmap().bind('init', function () {
console.log("xxxxxx");
var images = "img/icon.png";
var images2 = "img/icon2.png";
...
...
});
do you see xxxxxxx in the console every time you get in the page?
If not, try to find the way how to check whether the map was already initialized (second, third, fourth time, etc.) and then, call getJSON directly.