Ajax Request to log data Google Maps Animate ()

Question

I am trying to log the coordinates for markers on Google Maps . I made an ajax request to log the data however jquery is throwing an error. I am using Spring MVC framework and writing data back to an MySql database. Error attached under:

Animate Function

  function animate(index,d) {

       if (d>eol[index]) {

        marker[index].setPosition(endLocation[index].latlng);       

        if(marker[index].getPosition() == endLocation[index].latlng){
            console.log('Completed'+' '+index);
        //alert("Marker One Complete"); 
        }  


        return;
     }
      var p = polyline[index].GetPointAtDistance(d);

      //map.panTo(p);
      marker[index].setPosition(p);
      updatePoly(index,d);
      timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick);


      //log movement
      logMovement(index,marker[index]);  

  } 

Ajax Function Log Movement

function logMovement(index,marker){

        $.ajax({
            type:'GET',
            url:'logMovement.htm',
            data:{lat:marker.getPosition().lat(),
                  lng:marker.getPosition().lng,
                  socialSecurityNumber:global_citizens[index].socialSecurityNumber},
            dataType: 'json',
            success:function(data){

                if (data == false){
                    console.log('error occured in logging data');
                }

            }

        });

  }

Controller Mapping

 @RequestMapping(value="logMovement.htm", method=RequestMethod.GET)
 public void logMovement(@RequestParam double lat, double lng, int socialSecurityNumber)throws Exception{

     logger.info("About to log movement");
     this.markerManager.logMovement(lat, lng, socialSecurityNumber);

 }

Error

JavaScript

  var map;
    var directionDisplay;
    var directionsService;
    var stepDisplay;

    var position;
    var marker        = [];
    var polyline      = [];
    var poly          = [];
    var poly2         = [];
    var startLocation = [];
    var endLocation   = [];
    var timerHandle   = [];    

    var speed = 0.000005, wait = 1;
    var infowindow = null;

    var myPano;   
    var panoClient;
    var nextPanoId;

    var global_citizens = new Array();


    var Colors = ["#FF0000", "#00FF00", "#0000FF"];


    //------------------------------------------------------------

    function GetCitizensForTracking(){

        $.ajax({
            type: 'GET',
            async : false,
            global: 'false',
            url: 'getListOfMarkers.htm',
            headers : {Accept: 'application/json'},
            dataType: 'json'
        }).done(function(citizens) {
            global_citizens = citizens;

            $.each(citizens, function(i, c) {
            //console.log(c.name + ' | ' + c.socialSecurityNumber + ' | ' + c.lat+ ' | ' +c.lng);
            //citizen.push(c.name);
            console.log(global_citizens[i].name+','+global_citizens[i].citizenType);

            });             
        });     
    }      


    //---------------------------------------------------------------------

  function initialize() {  

    infowindow = new google.maps.InfoWindow(
      { 
        size: new google.maps.Size(150,50)
      });

      var myOptions = {
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      address = 'Trinidad and Tobago'
      geocoder = new google.maps.Geocoder();
      geocoder.geocode( { 'address': address}, function(results, status) {
      map.fitBounds(results[0].geometry.viewport);

    });


    } 

    //------------------------------------------------------------------------------

  function createMarker(latlng, label, html,citizenType) {

     var contentString = '<b>'+label+'</b><br>'+html;

     //console.log('Citizen icon is '+citizenType);     

    //replaces if...then..else...else if. Icon source are placed in an array that corresponds to value of the citizenType.
    //array starts from 0 . The first value of the citizens type is 2 so array should have a value at the 2 location 
    //so jquery will map the icon to the citizenType based on its matching location in the array

      var markerSource = [null,
                          null,
                         'resources/icons/criminal_new.ico',
                         'resources/icons/victim_new.ico',
                         'resources/icons/suspect_new.ico'];

      var icon = markerSource[citizenType];


        var marker = new google.maps.Marker({
           position: latlng,
           map: map,
           title: label,
           icon: new google.maps.MarkerImage(icon),
           zIndex: Math.round(latlng.lat()*-100000)<<5
           });
           marker.myname = label;       

       google.maps.event.addListener(marker, 'click', function() {
           infowindow.setContent(contentString); 
           infowindow.open(map,marker);
           });    

      return marker;
  }  

  //---------------------------------------------------------------------------------

  function setRoutes(){ 

    var directionsDisplay = new Array();

    for (var i=0; i< global_citizens.length; i++){

    var rendererOptions = {
        map: map,
        suppressMarkers : true,
         preserveViewport: true
    }
    directionsService = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  


    var request = {
        origin: global_citizens[i].startLat+','+global_citizens[i].startLng,
        destination: global_citizens[i].endLat+','+global_citizens[i].endLng,
        travelMode: travelMode
    };  

        directionsService.route(request,makeRouteCallback(i,directionsDisplay[i],global_citizens[i].citizenType));
        console.log("Set Routes "+global_citizens[i].name +' - '+global_citizens[i].citizenType);

    }   

  //------------------------------------------------------------------------------------

    function makeRouteCallback(rNum, disp,ctype){
      console.log("RNUM : " + rNum);
      console.log("ctype : " + ctype);

     if (polyline[rNum] && (polyline[rNum].getMap() != null)) {
           startAnimation(rNum);
           return;
          }

        return function(response, status){

            console.log(status);

        try{
             if (status == google.maps.DirectionsStatus.OK){

                var bounds = new google.maps.LatLngBounds();
                var route = response.routes[0];
                startLocation[rNum] = new Object();
                endLocation[rNum] = new Object();


                polyline[rNum] = new google.maps.Polyline({
                path: [],
                strokeColor: '#FFFF00',
                strokeWeight: 3
                });

                poly2[rNum] = new google.maps.Polyline({
                path: [],
                strokeColor: '#FFFF00',
                strokeWeight: 3
                });     


                // For each route, display summary information.
                var path = response.routes[0].overview_path;
                var legs = response.routes[0].legs;

                disp = new google.maps.DirectionsRenderer(rendererOptions);     
                disp.setMap(map);
                disp.setDirections(response);


                //Markers               
                for (i=0;i<legs.length;i++) {
                  if (i == 0) { 
                    startLocation[rNum].latlng = legs[i].start_location;
                    startLocation[rNum].address = legs[i].start_address;
                    // marker = google.maps.Marker({map:map,position: startLocation.latlng});               

                    //console.log('(i) The Citizen Type Is : '+ global_citizens[i].citizenType);

                    marker[rNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,ctype);                    

                  }

                  endLocation[rNum].latlng = legs[i].end_location;
                  endLocation[rNum].address = legs[i].end_address;
                  var steps = legs[i].steps;

                  for (j=0;j<steps.length;j++) {
                    var nextSegment = steps[j].path;                
                    var nextSegment = steps[j].path;

                    for (k=0;k<nextSegment.length;k++) {
                        polyline[rNum].getPath().push(nextSegment[k]);
                        //bounds.extend(nextSegment[k]);            


                    }

                  }
                } 

                 console.log(status);
                 polyline[rNum].setMap(map);
                 //map.fitBounds(bounds);        
                startAnimation(rNum);

            }   


        }catch(e){

            console.log(e.message);

        }       

        }

    }  

  }
    var lastVertex = 1;
    var stepnum=0;
    var step = 90; //0.9 metres
    var tick = 100; // milliseconds
    var eol = [];
  //----------------------------------------------------------------------              
   function updatePoly(i,d) {
   // Spawn a new poly line every 20 vertices, because updating a 100-vertex poly is too slow
    if (poly2[i].getPath().getLength() > 20) {
            poly2[i]=new google.maps.Polyline([polyline[i].getPath().getAt(lastVertex-1)]);
            // map.addOverlay(poly2)
          }

      if (polyline[i].GetIndexAtDistance(d) < lastVertex+2) {
          if (poly2[i].getPath().getLength()>1) {
              poly2[i].getPath().removeAt(poly2[i].getPath().getLength()-1)
          }
            poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),polyline[i].GetPointAtDistance(d));
      } else {
          poly2[i].getPath().insertAt(poly2[i].getPath().getLength(),endLocation[i].latlng);
      }     

   }
  //----------------------------------------------------------------------------

  function animate(index,d) {

       if (d>eol[index]) {

        marker[index].setPosition(endLocation[index].latlng);       

        if(marker[index].getPosition() == endLocation[index].latlng){
            console.log('Completed'+' '+index);
        //alert("Marker One Complete"); 
        }  


        return;
     }
      var p = polyline[index].GetPointAtDistance(d);

      //map.panTo(p);
      marker[index].setPosition(p);
      updatePoly(index,d);
      timerHandle[index] = setTimeout("animate("+index+","+(d+step)+")", tick);


      //log movement
      logMovement(index,marker[index]);  

  }

  //-------------------------------------------------------------------------


  function logMovement(index,marker){

        $.ajax({
            type:'GET',
            url:'logMovement.htm',
            data:{lat:marker.getPosition().lat(),
                  lng:marker.getPosition().lng,
                  socialSecurityNumber:global_citizens[index].socialSecurityNumber},
            dataType: 'json',
            success:function(data){

                if (data == false){
                    console.log('error occured in logging data');
                }

            }

        });

  }

  function startAnimation(index) {
        if (timerHandle[index]) clearTimeout(timerHandle[index]);
          eol[index]=polyline[index].Distance();
          map.setCenter(polyline[index].getPath().getAt(0));

          poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3});

          timerHandle[index] = setTimeout("animate("+index+",50)",2000);  // Allow time for the initial map display         

  }

  //----------------------------------------------------------------------------      

 $(document).ready(function(){   


    $('#getCitizens').on('click', function() {

            GetCitizensForTracking();    
            setRoutes();        


    });     


}); 


</script>

Answer 1

It looks like you're hitting the query limit for Google Maps .

I'm suspecting this might have something to do with your setTimeout function looping back. But it's hard to tell without seeing where some of those variables are set.