In ajax success part, calls a function and throws error setPosition not defined

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
		});		
	}
}

Hi @scrumvisualize, you’re calling changeMarkerPosition() with userMarker[i]. Where is userMarker defined, and where i? Are those both global variables? In this case, you should make sure that userMarker[i] is actually set in changeMarkerPosition().

Also note that setInterval takes a function as the 1st argument, but you’re passing in undefined (which is the return value of changeMarkerPosition()).

Yes, All are global variables

var currentLatitude;
var currentLongitude;
var newcords = ;
var userMarker= ;

Why do I need to set the again userMarker[i] in changeMarkerPosition(), as I have already set the same in addMarker(). Could you please explain ?

By the time the AJAX response arrives and changeMarkerPosition() gets called, the for loop in addMarker() has long finished with i === labels.length; this means that userMarker[i] is undefined then. If you pass the current marker to makeAjaxCall() explicitly instead, it will capture and remember that current marker in a closure.

I’d really avoid relying on global variables, especially when asynchronous operations like AJAX calls are involved. You just can’t be sure what values they’ll actually hold then, and it makes your code much harder to reason about.

1 Like

Will try this and will update

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.