Im trying to use the Geolocation API with Jquery Mobile. Everything works fine if i browse directly to my page from the browser.
But, if i navigate to it from another page, it does not load.
Also, if i remove the line of code with the "pageinit" command, i get the same issue/error but if i refresh the page it will load.
I know it has something to do with the way the DOM is handled through AJAX but i cant seem to get it to work the way it should/i want it to.
<!DOCTYPE html>
<html>
<head>
<title>My Location</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" id="geoPage">
<script type="text/javascript">
$("#geoPage").live("pageinit", function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('Geolocation not supported');
}
});
function success(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapcanvas = $('#mapcanvas');
var map = new google.maps.Map(mapcanvas[0], myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"I am here!"
});
//alert(latlng);
}
function error(msg) {
var errMsg = typeof msg == 'string' ? msg : "Geolocation failed";
$('#msg').html(errMsg);
}
$("#continue7").click(function(e){
$.mobile.changePage( "extension.htm", { transition: "slide"} );
});
</script>
<div data-role="header">
<h1>My Location</h1>
</div>
<div data-role="content">
<div id="msg"></div>
<div id="mapcanvas" style="height: 250px; width:250px;"></div>
<input id="continue7" type="button" value="Conintue" />
</div>
</div>
</body>
</html>
No comments:
Post a Comment