javascript - Jquery Accessing Array Index

Question

Trying to access index values of an array in a function. The array has 4 records however only index 1 - 3 values is being accessed the last value in the array is not being accessed, only 3 markers are being created. Jquery throws TypeError: a.eb is undefined and TypeError: b is undefined. Array variable is global_citizens.

Error is occurring at MakeRouteCallBack function at

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

Console Print Results

sdfsd sfsdf
fsdf sdfsdf
john wells
sdfdf dfrre

10.58909,-61.13388800000001-10.5089259,-61.3822726,2

10.66753800802045,-61.51776409679476-11.3165044,-60.53128919999999,3

10.67278501519437,-61.51673537546543-10.2690277,-61.3422372,2

10.67107578209723,-61.51689561536466-10.65,-61.4,4

Citizen icon is 2
Citizen icon is 3
Citizen icon is 4

TypeError: a.eb is undefined.......

Code:

Create Marker

 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,
                         '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;
  } 

Set Routes

   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;  

        console.log(global_citizens[i].startLat+','+global_citizens[i].startLng+'-'+global_citizens[i].endLat+','+global_citizens[i].endLng+','+global_citizens[i].citizenType);

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

        }

MakeRouteCallBack

    function makeRouteCallback(rNum, disp,ctype){   
     if (polyline[rNum] && (polyline[rNum].getMap() != null)) {
           startAnimation(rNum);
           return;
          }

        return function(response, status){      

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


                }

              }
            }           
        }

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

        }

    }   

Answer 1

Your code is not easy to understand, but your callback is sometimes returning undefined and sometimes a function, perhaps this causes the TypeError, since you could potentially be returning undefined when the API expects a function... this is only a guess though...

Indexing into the array was wrong, your variable i took on values from 1 - 3, when i became 4 you were indexing outside the array, thus you got a TypeError, indexing into the array should start from 0.