CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-mobiledom-events
jiteoswal1
jiteoswal1

Reputation: 21

Jquery mobile check when no internet connection to display error message instead of loading Google maps

What I am trying to achieve from past 2 days is that - I could show a error message on my jQuery mobile page when there is no internet connection that 'Sorry, No internet connection.'

I have tried a lot of stuff but none worked. Code below is now when last I tried by using try-catch block. But even this ain't helping. Following happens when I load the page in browser -

When Internet Connection Available - Map Loaded and works perfectly fine. When No Internet Connection - I get blank page. without page header and footer. with some default grey background and that looks bad for my application. :( Any kind of help is appreciable. I am still learning.

Code am using right now is given below -

 <!DOCTYPE html> 
 <html>
 <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
 <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
 <head>
 <meta charset="utf-8">
  <link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css"              type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8">  </script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style type="text/css"> 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
  </style>

 </head> 
 <body>

 <div data-role="header" data-theme="e">
 <a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
   <h1>Maps</h1>   
 </div>
 <div data-role="content" data-theme="d">  
  <div id="map_canvas">
   <script type="text/javascript">
     function initialize(){
       try{
            var locations = [
           ['Dr. Martin Luther King Library',37.3356,-121.8853, 4],
           ['Duncan Hall',37.3325,-121.8820, 5],
               ['Clark Hall',37.3360,-121.8827, 3],
               ['Event Center',37.3355,-121.8797, 2],
               ['Student Union',37.3369,-121.8806,  1]
             ];

            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                      zoom: 16,
                      center: new google.maps.LatLng(37.3369,-121.8806),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                   });

            var infowindow = new google.maps.InfoWindow();
            var marker, i;

           for (i = 0; i < locations.length; i++) 
             {  
                marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                     map: map
                });

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                      } 
         })(marker, i));
             }
               }
         catch(err)
           {
             document.getElementById("map_canvas").text='Sorry, No internet connection.';
           }
     }

   google.maps.event.addDomListener(window, 'load', initialize);

</script>  
</div>
</div>
<div data-role="footer" data-theme="e">
 <h4>&copy; blah-blah Inc.</h4>
</div>

</body>
</html>

Any kind of help is welcomed.

Upvotes: 1

Views: 6003

Answers (2)

Paul
Paul

Reputation: 1159

This is the code that I used for my PhoneGap/jQuery Mobile App.

<script type="text/javascript" charset="utf-8" src="js/core/cordova-1.6.1.min.js"></script>
<script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {

    }
    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }
    function checkReachability() {
        var _check=true;

        var networkState = navigator.network.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

        //alert('Connection type: '+ networkState + states[networkState]);
        if(networkState==="unknown"){
            _check=false;
            showAlert();
            return _check;
        }
        else {
            return true;
        }
    }
    function showAlert() {
        navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network Connectivity","OK");
    }
</script>

Then place inside the button that goes to your page. Something like this:

     <div data-role="content">  
      <ul data-role="listview">
        <li><a href="#MyMapPage" onTouchStart="checkReachability()" data-transition="slide">My Map Page</a></li>
      </ul> 
     </div>

If there isn't a connection, the user will receive a Native Alert "Please connect your device to Internet."

Upvotes: 0

jasssonpet
jasssonpet

Reputation: 2119

You can use window.navigator.onLine on iOS 5+ and Android 2.2+.

if (window.navigator.onLine) {
    google.maps.event.addDomListener(window, 'load', initialize);
} else {
    document.getElementById("map_canvas").text='Sorry, No internet connection.';
}

Upvotes: 1

Related Questions