Ramee Hamad
Reputation: 33
Google Map Directions on PhoneGap Mobile Application
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.
Upvotes: 2
Views: 10735
Answers (2)
Ramee Hamad
Reputation: 33
Just a heads up for anyone wanting to use this for an android mobile application. If you are using jQuery and PhoneGap, you must have all of the above code in the index.html heading. Then you simply have to add the html for the map to a single page in side the index.html file. Below is and example of how my working jQuery based site looks. You still need the aforementioned code in your manifest.xml as well.
<!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="assets/www/themes/theme1.css" rel="stylesheet" type="text/css">
<link href="assets/www/css/my.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="assets/www/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 data-role="page" id="page" data-theme="d">
<img src="assets/www/images/hometitle.png" id="img1"/>
<div class="center-button">
<div data-role="content" id="content1">
<a href="#page2" data-role="button" id="ui-btn" >Curriculum</a>
<a href="#page3" data-role="button" id="ui-btn">About Us</a>
<a href="#page4" data-role="button" id="ui-btn">Events</a>
<a href="#page5" data-role="button" id="ui-btn">Contact Us</a>
<a href="#page7" data-role="button" id="ui-btn">Register</a>
</div>
</div>
</div>
<div data-role="page" id="page2" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Curriculum</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<h3>About Our Curriculum</h3>
The preschool uses a Creative Curriculum to create an environment that supports learning through play and discovery in a variety of interest centers. This curriculum also helps teachers develop appropriate smalland large group activities to enhance child development. The activities presented thoughout the curricula focus on particular themes, introduction of various concepts, and include many subject areas: reading, social studies, math, science, and physical education.Progress is observed and documented in all developmental areas.
<h3>Classes Offered</h3>
Children must be 2 ½ old by September 30th.<br/>
Preschool hours are from 9:30am to 12:30pm.<br/><br/>
<b>Three-Year-Old Classes:</b><br/><br/>
Monday, Tuesday, and Thursday or (3 day program)<br/>
Monday, Tuesday, Thursday, and Friday (4 day program)<br/><br/>
<b>Four-Year-Old Classes:</b> <br/><br/>
Monday, Tuesday, Thursday, and Friday<br/><br/>
We also offer a “Lunch Bunch” program that will extend your child’s day until 2pm.
</div>
</div>
<div data-role="page" id="page3" data-theme="d">
<div data-role="header" data-theme="d">
<h1>About Us</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<p> BHCDC was created as an independent non-profit corporation to meet the growing need in the Enon area for education and kindergarten readiness. For 30 years the preschool has been offering a happy, safe, and loving environment providing the highest quality care possible to 2 ½ to 5- year- old children. The preschool is open to all children without regard to their religious, racial, cultural backgrounds, or abilities. BHCDC is licensed through the Department of Social Services of Virginia.</p>
</div>
</div>
<div data-role="page" id="page4" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Events</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" data-theme="d" id="content1">
<div data-role="collapsible-set">
<div data-role="collapsible" >
<h3>School Supplies Fundraiser</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page8" data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 2</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page9"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 3</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page10"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 4</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page11"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 5</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page12"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div data-role="page" id="page5" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Contact Us</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data- iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=d&source=s_d&saddr=2025+Florence+Avenue,+Chester,+VA&daddr=&hl=en&geocode=&aq=0&oq=2025+Florence+Avenuechest&sll=38.003385,-79.420925&sspn=5.799074,11.634521&mra=ls&ie=UTF8&t=m&ll=37.32915,-77.321348&spn=0.011944,0.017166&z=15&output=embed"></iframe>
</div><br/>
<table width="100%" border="0" id="table1" >
<tr>
<td>
<h3> Contact Information</h3>
<blockquote>
Address:<blockquote> 2025 Florence Ave<br/><br>
Chester Virginia, 23836
</blockquote></blockquote>
<blockquote>Phone:<blockquote> (804) 319-9183</blockquote> </blockquote>
<a href="#page6" data-role="button"> Contact Us Via Email</a>
</td>
</tr>
</table>
</div>
</div>
<div data-role="page" id="page6" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Contact Us</h1>
<a href="#page5" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a>
</div>
<div data-role="content" id="content1">
<iframe height="597" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://ramee.wufoo.com/embed/z7x3p3/"><a href="http://ramee.wufoo.com/forms/z7x3p3/">Fill out my Wufoo form!</a></iframe>
</div>
</div>
<div data-role="page" id="page7" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Register</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<iframe height="885" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://ramee.wufoo.com/embed/m7x3z9/"><a href="http://ramee.wufoo.com/forms/m7x3z9/">Fill out my Wufoo form!</a></iframe>
</div>
</div>
<div data-role="page" id="page8" id="basic-map" >
<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="" />
</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>
Notice also the way the page is defined when it comes to adding the map. The order of these id tags is very important. Other wise jQuery won't recognize any of the pages on your site.
<div data-role="page" id="page8" id="basic-map" >
id="basic-map" has to come last.
Upvotes: 1
Apostolos Emmanouilidis
Reputation: 7197
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>
Upvotes: 5
Related Questions
- Phonegap - Open Navigation Directions in Apple Maps App
- Google Map mobile view
- Showing current location + directions using google maps API and phonegap?
- PhoneGap direction using native Google Maps
- clean example of directions with google maps in jquery mobile?
- Google Maps Integration to Phonegap
- Google maps get directions
- jquery mobile + Google Maps + Geolocation
- Jquery mobile, google maps and phonegap
- Google map mobile jquery api Location and Direction