<!-- jQuery Mobile Multi Page -->
<!-- Geo Location API with terrain info -->
<!DOCTYPE html>
<html>
<head>
<title>Map Example Multiple Pages</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery mobile with Google maps</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script>
// create google map
function GoogleMap(position) {
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 20,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
var marker = new google.maps.Marker({
map: map,
position: location,
animation: google.maps.Animation.DROP,
title: "This is your location"
});
map.setCenter(location);
document.getElementById("coordlabel").innerHTML = (position.coords.latitude+","+position.coords.longitude);
}
// show error if location can't be found
function showError() {
alert("Location can't be found");
}
function test(){
//execute geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(GoogleMap, showError);
}
else {
alert("Your browser does not support Geolocation.");
}
}
$(document).on("pagecreate", "#map-page", function() {
test();
});
</script>
</head>
<body>
<div data-role="page" id="home-page">
<!-- /header -->
<div data-role="header">
<h1>Maps</h1>
</div>
<!-- /content -->
<div data-role="content">
<a href="#map-page" data-role="button" data-transition="fade">Click to see the Map</a>
</div>
</div>
<!-- /page -->
<div data-role="page" id="map-page">
<!-- /header -->
<div data-role="header">
<h1>Map</h1>
<a href="#home-page" data-icon="home">Home</a>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<p id="coordlabel">coords</p>
<div id="map_canvas" style="height:300px;"></div>
</div>
</div>
</body>
</html>