Вы находитесь на странице: 1из 3

<!

DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>GeoTaxi</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.m
in.css" />
<link rel="stylesheet" href="index.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></scrip
t>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.
0.js"></script>
<script type="text/javascript" charset="utf-8">
var lat;
var lng;
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and Ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Display `Position` properties from the geolocation
//
function onSuccess(position) {
//alert('OK');
var $content = $("#win2 div:jqmData(role=content)");
$content.height (getRealContentHeight());
var div = document.getElementById('myDiv');
lat = position.coords.latitude;
lng = position.coords.longitude;
div.innerHTML = 'Latitude: '

+ position.coords.latitude + '

<br/>' +
'Longitude: '

+ position.coords.longitude + '

'Altitude: '

+ position.coords.altitude + '

'Accuracy: '

+ position.coords.accuracy + '

'Altitude Accuracy: '

+ position.coords.altitudeAccur

'Heading: '

+ position.coords.heading

+ '

'Speed: '

+ position.coords.speed

+ '

<br/>' +
<br/>' +
<br/>' +
acy + '<br/>' +
<br/>' +
<br/>';
}
// Show an alert if there is a problem getting the geolocation
//
function onError() {
alert('onError!');
}

</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>GeoTaxi USA</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is your possition</p>
<div id="myDiv"></div>
<a data-role=button id=btn>Display map Check Street</a>
</div><!-- /content -->
<div data-role="footer">
<h4>New Windsor</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role=page id=win2>
<div data-role=header>
<h1>MAP & Street</h1>
</div>
<div data-role=content>
<div id="map_canvas" style="width:100%; height:50%"></div>
<div id="direccion"></div>
<a data-role=button id=btn1>Display map Check Street2</a>
</div>
<div data-role="footer">
<h4>End</h4>
</div><!-- /footer -->
</div>
</body>
</html>
<script>
$("#btn").bind ("click", function (event)
{
alert(lat + "-" + lng);
var geocoder;
var latlng = new google.maps.LatLng (lat, lng);
geocoder = new google.maps.Geocoder();
var options = {
zoom : 15,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
//var $content = $("#win2 div:jqmData(role=content)");
//$content.height (screen.height - 100);
//$content.height (getRealContentHeight());
//var map = new google.maps.Map ($content[0], options);
var map = new google.maps.Map (document.getElementById("map_canvas"), options)
;
$.mobile.changePage ($("#win2"));
new google.maps.Marker (

{
map : map,
animation : google.maps.Animation.DROP,
position : latlng
});
//**********ojo
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(15);
marker = new google.maps.Marker({
position: latlng,
map: map
});
//infowindow.setContent(results[1].formatted_address);
//infowindow.open(map, marker);
document.getElementById("direccion").innerHTML = results[1].form
atted_address;
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
});
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible")
;
var footer = $.mobile.activePage.find("div[data-role='footer']:visible")
;
var content = $.mobile.activePage.find("div[data-role='content']:visible
:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.out
erHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight())
<= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
</script>

Вам также может понравиться