Forum | Appery.io

I followed the excellent tutorial at http://docs.appery.io/tutorials/addin.... I noticed that the way the tutorial was written, you could either track your position, or create custom markers but not both.

I am trying to enable multiple markers with current locations at the same time.

I have "watchPosition" enabled in the geolocation request service parameter. I enabled this so the user could see their position on the map alongside the markers I have on the map.

I am using the service to update one of the markers and the the position of the map.

The problem is, the whole map gets redrawn every time the GPS positon changes. Is there any way to redraw just the position marker each time "watchPosition" happens?

Here is the JS I am using.
code
var currentLat = localStorage.getItem('currentLat');
var currentLong = localStorage.getItem('currentLong');
var mapInitialized = localStorage.getItem('_mapInitialized');
var myOptions = {
zoom :16,
streetViewControl: false,
center: new google.maps.LatLng(currentLat,currentLong),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('div[dsid="mapWindow"]').get(0), myOptions);
//Point 1
var pt1Latlng = new google.maps.LatLng(36.31089,-115.239311);
var marker = new google.maps.Marker({
position: pt1Latlng,
map: map,
title: "Mail Boxes",
icon: "http://allanrogers.net/mapIcons/number_1.png"
});

//Point 2
var pt2Latlng = new google.maps.LatLng(36.311435,-115.239343);
var marker = new google.maps.Marker({
position: pt2Latlng,
map: map,
title: "The Corner",
icon: "http://allanrogers.net/mapIcons/number_2.png"
});

//Point 3
var pt3Latlng = new google.maps.LatLng(36.310099,-115.239348);
var marker = new google.maps.Marker({
position: pt3Latlng,
map: map,
title: "Back Home",
icon: "http://allanrogers.net/mapIcons/number_3.png"
});

//current Location
var curLatlng = new google.maps.LatLng(currentLat,currentLong);
var marker = new google.maps.Marker({
position: curLatlng,
map: map,
title: "Current Location",
icon: "http://allanrogers.net/mapIcons/male-2.png"
});
/code

Hello! Every time you do prevar map = new google.maps.Map($('div[dsid="mapWindow"]').get(0), myOptions);/pre and because of that the map gets redrawn. Try to make map a global variable and add verification: if map is not defined, create new map otherwise use the current (already created) one map.

If I declare a variable on page load, will I be able to access that variable in the service?

Hi Allan,

Yes.

Thanks for the help! I simply needed to make the map variable global by using:
pre
code
window.map = new google.maps.Map($('div[dsid="mapWindow"]').get(0), myOptions);
/code/pre

Can you help with watchPosition service implementation please?
Here is the link http://gsfn.us/t/4sdee