ASP.NET Programming & Solutions: Get Directions Using Phonegap And Google API v3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
minimum-scale=1, maximum-scale=1">
<title>Map</title>

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/cordova-1.7.0.js"></script>

<script type="text/javascript">

var map;
var marker;
var infowindow;
var watchID;

$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
//for testing in Chrome browser uncomment
//onDeviceReady();
});

//PhoneGap is ready function
function onDeviceReady() {
$(window).unbind();
$(window).bind('pageshow resize orientationchange', function(e){
max_height();
});
max_height();
google.load("maps", "3.8", {"callback": map, other_params:
"sensor=true&language=en"});
}

function max_height(){
var h = $('div[data-role="header"]').outerHeight(true);
var f = $('div[data-role="footer"]').outerHeight(true);
var w = $(window).height();
var c = $('div[data-role="content"]');
var c_h = c.height();
var c_oh = c.outerHeight(true);
var c_new = w - h - f - c_oh + c_h;
var total = h + f + c_oh;
if(c_h<c.get(0).scrollHeight){
c.height(c.get(0).scrollHeight);
}else{
c.height(c_new);
}
}

function map(){
var latlng = new google.maps.LatLng(31.0167908, 27.8512211);
var latlng1 = new google.maps.LatLng(31.0167908, 27.1078541);

var myOptions = {
zoom: 12,
center: latlng,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);

var directionsService = new google.maps.DirectionsService();
var directionDisplay;
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

var request = {origin:latlng,destination:latlng1,travelMode:
google.maps.TravelMode.DRIVING };
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
computeTotalDistance(directionsDisplay.directions);
}

if(!marker)
{
//create marker
marker = new google.maps.Marker({position: latlng,map: map});
var infowindow = new google.maps.InfoWindow({content: "Midwife"});
google.maps.event.addListener(marker, 'click', function()
{
infowindow1.close();
infowindow.open(map,marker);
});
marker.setMap(map);
marker1 = new google.maps.Marker({position: latlng1,map: map});
var infowindow1 = new google.maps.InfoWindow({content: "Patient"});
google.maps.event.addListener(marker1, 'click', function()
{
infowindow.close();
infowindow1.open(map,marker1);
});
marker1.setMap(map);
}

});

}

function geo_error(error){
//comment
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}

function computeTotalDistance(result)
{
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++)
{
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("distance").innerHTML = "Distance : "+total + " km";
}

</script>

</head>
<body>

<div data-role="page" id="index">
<div data-role="header" data-theme="b"><h1>Map Header</h1></div>
<div data-role="content" style="padding:0;">
<div id="distance" style="border; 1px solid black;font-size:13px"></div>
<div id="map" style="width:100%;height:100%;"></div>
<div id="route" style="width: 25%; height:480px; float:right;
border; 1px solid black;"></div>
</div>
<div data-role="footer" data-theme="b"><h4>Map Footer</h4></div>
</div>

</html>

ASP.NET Programming & Solutions

Amazon Ad

Tuesday 22 May 2012

Get Directions Using Phonegap And Google API v3

No comments:

Post a Comment

How to implement Captcha v3 in ASP.NET