Google Map Directions on PhoneGap Mobile Application
jquery, maps
Solution
Android Configuration:
The following permissions are required in AndroidManifest.xml:
- `<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />`
- `<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />`
- `<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />`
- `<uses-permission android:name="android.permission.INTERNET" />`
The below plugin should exist in res/xml/config.xml:
- `<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>`
iOS Configuration:
Add in config.xml the `<plugin name="Geolocation" value="CDVLocation" />`.
The below code has been successfully tested on a hybrid app using Cordova 2.6.0.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link href="../themes/theme1.css" rel="stylesheet" type="text/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 type="text/javascript">
var map,
currentPosition,
directionsDisplay,
directionsService;
function initialize(lat, lon) {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
currentPosition = new google.maps.LatLng(lat, lon);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: currentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var currentPositionMarker = new google.maps.Marker({
position: currentPosition,
map: map,
title: "Current position"
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(currentPositionMarker, 'click', function () {
infowindow.setContent("Current position: latitude: " + lat + " longitude: " + lon);
infowindow.open(map, currentPositionMarker);
});
}
function locError(error) {
// initialize map with a static predefined latitude, longitude
initialize(59.3426606750, 18.0736160278);
}
function locSuccess(position) {
initialize(position.coords.latitude, position.coords.longitude);
}
function calculateRoute() {
var targetDestination = $("#target-dest").val();
if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
var request = {
origin: currentPosition,
destination: targetDestination,
travelMode: google.maps.DirectionsTravelMode["DRIVING"]
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setPanel(document.getElementById("directions"));
directionsDisplay.setDirections(response);
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
$("#results").show();
} else {
$("#results").hide();
}
});
} else {
$("#results").hide();
}
}
$(document).on('click', '#directions-button', function (e) {
e.preventDefault();
calculateRoute();
});
</script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript">
var showGeolocationInfo = function() {
navigator.geolocation.getCurrentPosition(locSuccess, locError);
}
function init(){
document.addEventListener("deviceready", showGeolocationInfo, true);
}
</script>
</head>
<body onload="init();">
<div id="basic-map" data-role="page" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Directions</h1>
<a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a>
</div>
<div data-role="content" data-theme="d">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<div data-role="fieldcontain" data-theme="d">
<input type="text" name="target-dest" id="target-dest" value="13002 Rivers Bend Road, Chester, VA" />
</div> <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
Problem
I was trying to use an example you created for a clean example of directions using google maps. The code I was using is: ``` <!doctype html> <html lang="en"> <head> <title>jQuery mobile with Google maps</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link href="../themes/theme1.css" rel="stylesheet" type="text/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 type="text/javascript"> var map, currentPosition, directionsDisplay, directionsService; function initialize(lat, lon) { directionsDisplay = new google.maps.DirectionsRenderer(); directionsService = new google.maps.DirectionsService(); currentPosition = new google.maps.LatLng(lat, lon); map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 15, center: currentPosition, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var currentPositionMarker = new google.maps.Marker({ position: currentPosition, map: map, title: "Current position" }); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(currentPositionMarker, 'click', function() { infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon); infowindow.open(map, currentPositionMarker); }); } function locError(error) { // initialize map with a static predefined latitude, longitude initialize(59.3426606750, 18.0736160278); } function locSuccess(position) { initialize(position.coords.latitude, position.coords.longitude); } function calculateRoute() { var targetDestination = $("#target-dest").val(); if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') { var request = { origin:currentPosition, destination:targetDestination, travelMode: google.maps.DirectionsTravelMode["DRIVING"] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setPanel(document.getElementById("directions")); directionsDisplay.setDirections(response); /* var myRoute = response.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { alert(myRoute.steps[i].instructions); } */ $("#results").show(); } else { $("#results").hide(); } }); } else { $("#results").hide(); } } $(document).live("pagebeforeshow", "#map_page", function() { navigator.geolocation.getCurrentPosition(locSuccess, locError); }); $(document).on('click', '#directions-button', function(e){ e.preventDefault(); calculateRoute(); }); </script> </head> <body> <div id="basic-map" data-role="page" data-theme="d"> <div data-role="header" data-theme="d"> <h1>Directions</h1> <a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a> </div> <div data-role="content" data-theme="d"> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px;"></div> </div> <div data-role="fieldcontain" data-theme="d"> <input type="text" name="target-dest" id="target-dest" value="13002 Rivers Bend Road, Chester, VA" /> </div> <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a> <div id="results" style="display:none;"> <div id="directions"></div> </div> </div> </div> </body> </html> ``` It works beautifully in a normal browser; however, when i try displaying it inside of an android or ios app, it just shows a grey box with no map, and when you click directions, it doesnt do anything. Do you have any idea what I am doing wrong.