I wanna make an app which requires me to get my position and display it on google maps. I used the code from http://wiki.phonegap.com/w/page/16494764/PhoneGap%20Geolocation%20Sample%20Application.
I am developing for Android 2.2 using phonegap 2.0.0. I am using the emulator 2.2.
I have installed everything from Phonegap correctly and i obtained a google Api3 key for the map.
I place the key after: http://maps.google.com/maps/api/staticmap?center=(here i place the key). Now when i start the app i use CMD to send coördinates.
Telnet Localhost 5554, geo fix et cetera. When i start the app it will give an error:
Cant retrieve position Error[object PositionError].
I don’t get the error anymore (i added enable HighAccuracy).
But it doesnt show anything either. So i think i did something wrong with the google map or i forgot something.
Could anyone help me? It shows a question mark in the top left corner.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
if (navigator.userAgent.indexOf('Browzr') > -1) {
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + latitude + ',' + longitude +
"&zoom=14&size=300x400&markers=color:blue|label:S|" + latitude + ',' + longitude;
console.log("imageUrl-" + imageUrl);
$("#map").remove();
$(document.body).append(
$(document.createElement("img")).attr("src", imageUrl).attr('id', 'map')
);
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' + e);
};
navigator.geolocation.getCurrentPosition(imageUrl, fail,{ enableHighAccuracy: true });
}
</script>
</head>
Use this code and set sensor = false on
Hope it will help. Remember that it is not static map.