On click on some button will call the addMarker() function and will add the marker on Google map, after that it will call the makeAjaxCall() function as below:
function addMarker(labels) {
newcords = getLocation();
for (i=0; i< labels.length; i++ ) {
userMarker[i] = new google.maps.Marker({
position : { lat : currentLatitude, lng : currentLongitude},
zoom : 9,
icon : 'images/pointer1.PNG',
title : temLabel,
draggable : true,
map : map
});
markers.push(userMarker[i]);
makeAjaxCall(currentLatitude, currentLongitude, temLabel, plyrEmail);
}
}
Ajax will call the servlet and save the lat, long and name details in database, in my ajax success part I am calling a 'window.setInterval(changeMarkerPosition(userMarker[i]), 3000);'
function
Whenever a location change happens, this function ideally to execute and move the marker to a new location on google map.
function makeAjaxCall (currentLatitude, currentLongitude, temLabel, plyrEmail) {
$.ajax({
type: "POST",
url: "PlayerLocation",
data: {currentLat: currentLatitude, currentLong: currentLongitude, title: temLabel, email: plyrEmail},
success: function(data){
window.setInterval(changeMarkerPosition(userMarker[i]), 5000);
}
});
}
But somehow the following error is displaying, TypeError: marker is undefined in fire fox console and in chrome it giving setPosition is not defined at this line ‘marker.setPosition(coolLatlng);’ Could someone please advise on how to handle this error ?
function changeMarkerPosition(marker) {
coolLatlng = new google.maps.LatLng(currentLatitude, currentLongitude);
map.panTo(new google.maps.LatLng(currentLatitude, currentLongitude));
marker.setPosition(coolLatlng);
markers.push(marker);
flightPlanCoordinates[0] = new google.maps.LatLng({
lat : currentLatitude,
lng : currentLongitude
});
for ( var i = 1; i <= markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng({
lat : currentLatitude,
lng : currentLongitude
});
}
}