I am having trouble to get this HTML5 geolocation app for Android running. The app works fine in Firefox browser from my desktop, but once I compile it using Eclipse - PhoneGap, the geolocation button does not perform the command document.write, I have tried with alert(), as well as console.log(), but there is no positive result.
The code is below, can you please point to me if I am missing setting up any of the phone sensors for geolocation?
Below is the code:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
document.write('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
document.write(' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
document.write('We did not get your location. You are safe from big broda');
}
});
</script>
</headd>
<body>
<button id="startGeo"> Click here for geolocation </button>
</body>
</html>
document.write seems to be the cause of your problem, rather than a failure in geolocation, assuming of course you have adequate permissions in your 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" />
Try this:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
$('#result').append('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('#result').append("location: "+' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
$('#result').append('We did not get your location. You are safe from big broda');
}
});
</script>
</head>
<body>
<button id="startGeo"> Click here for geolocation </button>
<div id="result"></div>
</body>
BTW, there's a typo in your source code </headd> should be </head>.
You should also really use $(document).on("deviceready") instead of $(document).ready() with Phonegap as 'ready' event only indicates DOM is ready whereas 'deviceready' indicates Phonegap has fully loaded.
Related
I'm learning ionic and I'm having trouble displaying my Android phone's geo location (lat and long) on screen. How can I do this?
Code take from https://www.tutorialspoint.com/ionic/ionic_geolocation.htm
.controller('GeoCtrl', function($scope, $cordovaGeolocation) {
$scope.result = "";
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var lat = position.coords.latitude;
//$scope.geo.lat = position.coords.latitude;
var long = position.coords.longitude;
//$scope.geo.long = position.coords.longitude;
console.log(lat + ' ' + long)
$scope.geo = lat + ' ' + long;
}, function(err) {
console.log(err)
});
})
And here's the html where i just want the geo location to be displayed:
<ion-view view-title="Submit New Thing">
<ion-content class="padding">
<h2>List of items for sale</h2>
<div >
<h3> Geo locaton is {{geo}}</h3>
</div>
</ion-content>
</ion-view>
When I test on my phone {{geo}} is literally displayed.
Answer: I didn't have the ngCordova dependency injected into the app.
I'm using watchPosition on a small application and I'm using both high accuracy positioning (GPS) and Coarse Positioning (Network based) to limit battery consumption.
To enable coarse positioning, I use following command :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });`
and To enable Fine Positioning :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
To reset watching, I using clearWatch :
navigator.geolocation.clearWatch(watchID);
Strange thing is that after enabling Fine positioning, I cannot switch back to coarse positioning (GPS icon on android is still on).
for example :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is off which is OK
navigator.geolocation.clearWatch(watchID); //GPS icon still off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true }); // GPS icon become on (which is OK)
navigator.geolocation.clearWatch(watchID); //GPS icon become off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is on which is **NOT OK**
I'm using Android 5.1.1.
Full example code :
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", WatchCoarse, false);
var watchID = null;
// device APIs are available
//
function WatchCoarse() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: false };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
}
function WatchFine() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// clear the watch that was started earlier
//
function clearWatch() {
if (watchID != null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p>
<button onclick="clearWatch();">Clear Watch</button>
<button onclick="WatchCoarse();">Watch Coarse</button>
<button onclick="WatchFine()">Watch Fine</button>
</body>
</html>
I am making phonegap android application for geolocation. But it doesn't show google map.My code is as follow. I installed geolocation plugin for cordova. And it run proper upto alert of geocode in below code. I am testing with android mobile.
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript src="http://maps.googleapis.com/maps/api/geocode/xml?sensor=false"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000, enableHighAccuracy: true });
}
function onSuccess(position) {
alert("success");
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
ReverseGeocode(latitude,longitude);
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function ReverseGeocode(latitude, longitude){
alert("geocode");
var reverseGeocoder = new google.maps.Geocoder();
alert("location");
var currentPosition = new google.maps.LatLng(latitude, longitude);
alert("position");
}
</script>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
Please help.
Thanks.
How to show a Google map in your Phonegap app using Google Map api V3?
Start by adding a reference to Google maps api in index.html:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
Then add a div that will contain the map. Choose an id like “map_canvas”. That id will be used to add our map from our javascript later on.
<div id="map_canvas">
</div>
2. Create a new javascript file called googlemap.js in the www folder and add the following content:
function GoogleMap(){
this.initialize = function(){
var map = showMap();
}
var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}
}
and add a reference to it in index.html
<script type="text/javascript" src="googlemap.js"></script>
the mapOptions variable contains information about zoomlevel, where the center of the map is and what kind of map we want to show.
And the line containing the map variable uses getElementById to get our map_canvas and adding the map.
3. Showing the map
To show the map we must run the initialize function in googlemap.js. Since we are using the example index.html from phonegap we add these lines to the onDeviceReady function in index.html
function onDeviceReady(){
var map = new GoogleMap();
map.initialize();
}
Now run the app and you should se a map over Australia.
4. Adding markers
To add markers to our map we use the LatLng and Marker object from Google API.
Edit the initialize function in googlemap.js to look like this:
function GoogleMap(){
this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
}
and add the following function, called addMarkersToMap:
var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
}
}
5. Zooming out the map to show all markers
To zoom out the map without knowing which zoomlevel to use we are going to use the LatLngBounds object from the Google Map API.
Start off by adding the following line first in the addMarkersToMap function:
var mapBounds = new google.maps.LatLngBounds();
and before the closing tag of the function add these lines:
mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);
map.fitBounds(mapBounds);
The addMarkersToMap function now looks like this:
var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);
map.fitBounds(mapBounds);
}
Now we’re done, run the app and the map now zooms out so you can see the marker which we added in Sweden.
I'm doing a small sample app which displays latitude and longitude in a popup when i click on the button
here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp1</title>
<link href="css/index.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<script type="text/javascript" charset="utf-8">
var alertmsg = function (position) {
var msg = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />'
navigator.notification.alert(msg);
}
function geoLocation() {
navigator.geolocation.getCurrentPosition(alertmsg)
}
</script>
</head>
<body>
<input type="button" id="btnClick" onclick="geoLocation()" value="click" />
</body>
</html>
It is working in Ripple emulator
But it is not working in Android emulator and Genymotion
I figured out the problem.
If i use this code it is working fine
navigator.geolocation.getCurrentPosition(alertmsg, onError, { timeout: 30000, enableHighAccuracy: true });
It is working in all emulators(Ripple,Android,Genymotion)
I'm using Visual Studio 13 with a Backbone based smartphone app and this was a pain. Adding the timeout option and enableHighAccuracy always throws the onError handler, without these neither return.
So this is a good answer:
//Android Emulator safe version
function getGpsCordinates(callback) {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
//Success
function (position) {
console.log("GPS: Success");
callback(position);
},
//Error
function (error) {
console.log("GPS: Error");
var position = {
coords: {
longitude: 0,
latitude: 0,
speed: 0
}
};
callback(position);
},
{ timeout: 7000, enableHighAccuracy: true });
} else {
var position = {
coords: {
longitude: 0,
latitude: 0,
speed: 0
}
};
console.log("GPS: Not Supported");
callback(position);
}
console.log("GPS: Continued");
}
getGpsCordinates(function(mycallback) {
alert(mycallback.coords.latitude);
});
Code Pen Version
i have this simple app , that works fine in a browser , but when building it using phonegap it's just shows a simple html page, means that jquery not working ,
in my page i call the jquery mobile.min.css ,jquery.min.js than this script :
$(document).bind("pagebeforechange", function (event, data) {
$.mobile.pageData = (data && data.options && data.options.pageData)
? data.options.pageData
: null;
});
$(document).ready( function (event) {
compSearch('');
$("#searchbtn").click(function () {
var sText = $("#searchtxt").val();
$("#search").dialog("close");
compSearch(sText)
});
});
function compSearch(searchString) {
var theUrl = serverName + "MobileService.asmx/getOrgPage";
var orgId = qString("org");
$.ajax({
type: "POST",
url: theUrl,
data: '{"OrgId":' + orgId +
',"SearchString":"' + searchString +
'"}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (msg) {
var s = msg.d[0];
$("#header").html(s).trigger("create");
$("#footer").html(msg.d[3]).trigger("create");
$("#contentHeading").html(msg.d[1]);
$("#content").html(msg.d[2]).find("ul").listview();
$("#newscontent").html(msg.d[4]);
},
error: function (msg) {
alert('error ' + msg.d[0]);
}
});
}
$(document).on('pagebeforeshow', '#indivnews', function (event, data) {
if ($.mobile.pageData && $.mobile.pageData.np) {
var orgId = qString("org");
var itemId = $.mobile.pageData.np;
var theUrl = serverName + "MobileService.asmx/getNewsPage";
var clubName = "";
$.ajax({
type: "POST",
url: theUrl,
data: '{"orgId":' + orgId +
',"compId":' + 0 +
',"itemId":' + itemId +
',"clubName":"' + clubName +
'"}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (msg) {
var s = msg.d[0];
$("#indivcontent").html(msg.d[4]);
},
error: function (msg) {
alert('error ' + msg.d[0]);
}
});
}
});
than the jquery mobile.min.js
like i said it's works fine in a browser,please if you have and idea to solve it
thank you.
It may be that you are loading the html page before PQ and JQM are properly initialized. I use the following in my project to ensure the framework is loaded correctly:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("pageinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(frameworksLoaded);
function frameworksLoaded() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
jQm.allowCrossDomainPages = true;
console.log('PG & JQM ready');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width =device-width, initial-scale=1.0, user-scalable=no" />
<title>Test</title>
<link href="Example.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.css" rel="stylesheet" />
<link href="../www/Content/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="../www/Scripts/jquery-2.1.0.min.js"></script>
</head>
<body>
</body>
</html>
Reference to Deferred and Jquery Promises:
http://api.jquery.com/deferred.promise/