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

dom-eventsgoogle mapsjavascriptjqueryjquery-mobile

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.

Best Answer

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.';
}
Related Topic