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
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { alert('onDeviceReady Function works');
var option = {frequency:500,maximumAge: 0, timeout: 1000, enableHighAccuracy:true};
navigator.geolocation.getCurrentPosition(onSuccess, onError, option );
}
function onSuccess(position) { alert("It Works!!!");
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude;
}
function onError(error) {
//alert(error);
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
</script>
<p id="geolocation">Finding geolocation...</p>
Above code deviceready() function is working fine but alert("It Works!!!"); not working. Please tell me why it is not working in my device emulator?
I am getting error message.
Screenshot:
Increase timeout to '5000' or '10000' and also increase maximumAge
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
Check the PhoneGap Error documentation .
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.