search

ansarali / jquery-ui-map

Automatically exported from code.google.com/p/jquery-ui-map
0 stars 0 forks source link

Problem when app is launched with no connection #69

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
I am using query-ui-map successfully with my iOS Phonegap app. 
It's working fine when there is an Internet connection during launch.
When app is launched with no connection, map doesn't work also after returning 
internet connection.

Here index.html's head

<head>
<title>ABCrifiuti</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=no">
<!-- Adding jQuery scripts -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
 $.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
 $.ajax to load cross-domain pages. -->
<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;      
    });
</script>
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    // Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        navigator.splashscreen.hide();
        document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener    
    }
</script>
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script><!-- jQuery 
FN Google Map 3.0-rc -->
<script type="text/javascript" src="js/scripts.js"></script>
</head>

Here google map code
$('#pagina-ecocar').live('pageshow',function(event){

        //http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html
        $('#map_canvas').gmap( {'zoom':10, 'center': '44.404086,8.931184', 'streetViewControl' : false, 'mapTypeControl' : false}).bind('init', function() {        

                $.getJSON( serviceURL + 'ios_map_ecocar.php'+string_ecocar , function(data) { 
                $.each( data.markers, function(i, marker) {

                    $('#map_canvas').gmap(
                    'addMarker', { 
                        'position': new google.maps.LatLng(marker.lat, marker.lon), 
                         'icon': {
                            path: google.maps.SymbolPath.CIRCLE,
                            fillColor: '#007830',
                            fillOpacity: 10,
                            strokeColor: '#FFF',
                            strokeWeight:3,
                            scale: 10
                          },
                        'bounds': false
                    }
                    ).click(function(e) {

                        $('#map_canvas').gmap('openInfoWindow', { 
                            'content': '<div class="tooltip_gmap"><strong>'+marker.nh+'</strong><br />'+marker.address+'<br />'+ marker.day_esteso+' dalle '+marker.arrive_h+':'+marker.arrive_m+' alle '+marker.departure_h+':'+marker.departure_m+'</div>'
                        }, this);

                    });//gmap

                });//$.each

            })

        });//gmap bind*/

});

Original issue reported on code.google.com by pompilio...@gmail.com on 14 Feb 2013 at 11:50

GoogleCodeExporter commented 8 years ago 
Hi - yeah that´s pretty easy to explain. JQM works with AJAX - so the header 
of your Index File is not changed during a page transition. So if you turn on 
your internet connection - the header is the same wo cant send his Request to 
google maps.

You can build up script - 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=true"></script>
- via Jquery.

Don´t know how to do it exactly right now, but should give you some help i 
think.

Then do this in your:
$('#pagina-ecocar').live('pageshow',function(event){ 

for setting up the script every time your Page with the map is shown.

Should do the trick ;)

Greetings Dominik

Original comment by kempf.d...@googlemail.com on 2 May 2013 at 1:13