I am doing two html5/javascript apps with phonegap for android, and I have them both municating through php with ajax, in both of them I am using the google maps api, and I need to know in both of them where the other guy is, while one is moving and another is waiting for him, then I have 2 questions:
In app1(the one that is moving), I need to refresh the marker every 10 seconds on the map, without loading the whole page.
I am loading through ajax, the coordinates that are saved in the mysql database for both apps, so I need to set a second marker in each map, as the other apps location, and track it's movements every 10 seconds.
This is how I am loading the map in each app:
function getPos() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
setTimeout(getPos, 10000); //call function after 10 seconds
}
function onSuccess(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
var currentposition = new google.maps.LatLng(lat,lon);
var mapoptions = {
zoom: 16,
center: currentposition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image
};
var map = new google.maps.Map(document.getElementById("map"), mapoptions);
var marker = new google.maps.Marker({
position: currentposition,
map: map
});
save_position_in_bd();
}
function onError(error) {
console.log('code: ' + error.code, 'message: ' + error.message);
}
And I am getting the location of the other app with an ajax POST:
$.ajax({
type: "POST",
url: "http://localhost/call.php",
data: "name=rui",
dataType: 'json',
success: function(data){
lat = data.lat;//get other apps lat
lon = data.lon;//get other apps lon
},
error: function(jqXHR, textStatus, errorThrown ){
console.log("POST: ", jqXHR, textStatus, errorThrown);
}
});
What can I do to solve my problems? I have tried to refresh the map in different functions, and tried to load only the marker, but it doesn't work. Also the exact api I am using is:
SOLVED IT: The answer is to split the code in different functions and call only the marker, in order to update it:
function getPos() {//initial function to read the position
estado = "livre";
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
setTimeout(keep_alive, 10000); //read every 10 seconds
}
function onSuccess(position) {//read map and mark it in the map
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
var image = '/img/taxi_green.png';
var mapoptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lon),
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image
};
map = new google.maps.Map(document.getElementById("map"), mapoptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map
});
save_position();
}
function keep_alive() {//read position and mark it in the map
navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
save_position();
setTimeout(keep_alive, 10000); //read every 10 seconds
}
//refresh only the marker
function onRefresh(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}
function trace_client() {//mark clients position in the map
//clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
clientMarker = new google.maps.Marker({
position: new google.maps.LatLng(client_lat,client_lon),
map: map
});
console.log("client marked in the map");
}
function onError(error) {
console.log('code: ' + error.code, 'message: ' + error.message);
}
I am doing two html5/javascript apps with phonegap for android, and I have them both municating through php with ajax, in both of them I am using the google maps api, and I need to know in both of them where the other guy is, while one is moving and another is waiting for him, then I have 2 questions:
In app1(the one that is moving), I need to refresh the marker every 10 seconds on the map, without loading the whole page.
I am loading through ajax, the coordinates that are saved in the mysql database for both apps, so I need to set a second marker in each map, as the other apps location, and track it's movements every 10 seconds.
This is how I am loading the map in each app:
function getPos() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
setTimeout(getPos, 10000); //call function after 10 seconds
}
function onSuccess(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
var currentposition = new google.maps.LatLng(lat,lon);
var mapoptions = {
zoom: 16,
center: currentposition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image
};
var map = new google.maps.Map(document.getElementById("map"), mapoptions);
var marker = new google.maps.Marker({
position: currentposition,
map: map
});
save_position_in_bd();
}
function onError(error) {
console.log('code: ' + error.code, 'message: ' + error.message);
}
And I am getting the location of the other app with an ajax POST:
$.ajax({
type: "POST",
url: "http://localhost/call.php",
data: "name=rui",
dataType: 'json',
success: function(data){
lat = data.lat;//get other apps lat
lon = data.lon;//get other apps lon
},
error: function(jqXHR, textStatus, errorThrown ){
console.log("POST: ", jqXHR, textStatus, errorThrown);
}
});
What can I do to solve my problems? I have tried to refresh the map in different functions, and tried to load only the marker, but it doesn't work. Also the exact api I am using is:
http://maps.googleapis./maps/api/js?sensor=false
SOLVED IT: The answer is to split the code in different functions and call only the marker, in order to update it:
function getPos() {//initial function to read the position
estado = "livre";
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
setTimeout(keep_alive, 10000); //read every 10 seconds
}
function onSuccess(position) {//read map and mark it in the map
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
var image = '/img/taxi_green.png';
var mapoptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lon),
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image
};
map = new google.maps.Map(document.getElementById("map"), mapoptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map
});
save_position();
}
function keep_alive() {//read position and mark it in the map
navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
save_position();
setTimeout(keep_alive, 10000); //read every 10 seconds
}
//refresh only the marker
function onRefresh(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}
function trace_client() {//mark clients position in the map
//clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
clientMarker = new google.maps.Marker({
position: new google.maps.LatLng(client_lat,client_lon),
map: map
});
console.log("client marked in the map");
}
function onError(error) {
console.log('code: ' + error.code, 'message: ' + error.message);
}
- You're almost there. What is happening? What isn't happening? – Jamie Starke Commented Jul 5, 2013 at 13:38
- the page was reloading every time I refreshed the map, I solved it now, I made the code in different functions and one for updating only the marker, and it's working. Thanks for replying – rmalta Commented Jul 6, 2013 at 13:24
- 2 Glad to hear you got it working. You should submit it as an answer, so that it might help others in the future. – Jamie Starke Commented Jul 6, 2013 at 20:28
1 Answer
Reset to default 2In an effort to make it easier to find, here is the solution to the question.
The answer is to split the code in different functions and call only the marker, in order to update it:
function getPos() {//initial function to read the position
estado = "livre";
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
setTimeout(keep_alive, 10000); //read every 10 seconds
}
function onSuccess(position) {//read map and mark it in the map
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
var image = '/img/taxi_green.png';
var mapoptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lon),
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: image
};
map = new google.maps.Map(document.getElementById("map"), mapoptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map
});
save_position();
}
function keep_alive() {//read position and mark it in the map
navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
save_position();
setTimeout(keep_alive, 10000); //read every 10 seconds
}
//refresh only the marker
function onRefresh(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log("Found - LAT: ", lat, "LON: ", lon);
marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}
function trace_client() {//mark clients position in the map
//clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
clientMarker = new google.maps.Marker({
position: new google.maps.LatLng(client_lat,client_lon),
map: map
});
console.log("client marked in the map");
}
function onError(error) {
console.log('code: ' + error.code, 'message: ' + error.message);
}