Amazon Ad

Tuesday, 22 May 2012

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>

No comments:

Post a Comment

Comments are welcome, Please join me on my Linked In account

http://in.linkedin.com/pub/ritesh-tandon/21/644/33b

How to implement Captcha v3 in ASP.NET

 I was facing an issue of dom parsing in my website. I finally resolved it by using Google Captcha V3. Step 1: Get your keys from https:...