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>© 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+.