I am currently working on a tracking application that utilizes the Geolocation and Google Maps API. The app is set up to track the user's position using the watchPosition() function. As of now, a new blue icon is displayed every time a new longitude and latitude position is received. However, I would like the app to only plot the start position with a red marker, and then show the blue icon when it receives the latest coordinates instead of adding a new icon to the map for every new position.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
width: 100%;
}
</style>
<div id="dvContent">
</div>
<div id="map_canvas">
Hello
</div>
<!-- <input type="text" name="'adr" id="address" value="-41.2889, 174.7772" />
<input type="button" value="Start Watching" id="start">
<input type="button" value="Stop Watching" id="stop">
<input type="button" value="Delete Markers" id="delete"> -->
<script type="text/javascript">
var watchID = null;
var geo;
var map;
var startMarker = []; // Red Icon
var endMarker = []; // Blue Icon
var geo_options = {
enableHighAccuracy: true,
maximumAge : 10000000,
timeout : 20000
};
var pathLineArray = new Array();
var mypath;
var geocoder;
var mapMarkerRevCode;
console.log(startMarker);
$(document).ready(function(){
function getGeoLocation(){
if (navigator.geolocation) {
return navigator.geolocation;
} else {
return "undefined";
}
}
function startWatching(){
watchID = geo.watchPosition(show_coords, geo_error, geo_options);
// watchID = geo.getCurrentPosition(show_coords, geo_error, geo_options);
}
function stopWatching(){
if (watchID!=null) {
geo.clearWatch(watchID);
}
}
$('#start').click(startWatching);
$('#stop').click(stopWatching);
if(geo = getGeoLocation()){
startWatching();
} else {
alert('Geolocation is not supported');
}
});
function show_coords(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
if (map) {
// Makes it so that it doesnt have to reload the map everytime, it just pans to the new position
map.panTo(latlng);
} else {
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mypath = new google.maps.Polyline({
path: pathLineArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
startMarker = new google.maps.Marker({
position: latlng,
map: map,
});
}
// Push lat and long coords to this array
pathLineArray.push(latlng);
if (mypath) {
mypath.setPath(pathLineArray);
} else {
mypath = new google.maps.Polyline({
path: pathLineArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
map: map,
});
}
endMarker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
}
function geo_error(error){
switch(error.code){
case error.TIMEOUT:
alert("geolocation timeout");
break;
case error.POSITION_UNAVAILABLE:
alert("Gelocation position unavailable");
break;
case error.PERMISSION_DENIED:
alert("Permission denied");
break;
default:
alert('Unknown error');
}
}
</script>
</body>
</html>