How to fix Microsoft Bing API Maps error

Question

I am trying to use the BING Map API but I'm getting stuck.
My longitudes and latitudes are stored in a SharePoint list. I get the following error but not sure why Uncaught TypeError: Cannot read property 'Latitude' of undefined

I'm not sure why that happens because when I do a console.log(myArrayOfPins), I see the following in the developer tool

Here's my code:

<script type="text/javascript">

        var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('mapItems')/items";
        var headers = {
                "accept": "application/json;odata=verbose"
            };

        var myArrayOfPins;
        $.ajax({
                 url: endPointUrl,
                 type: "GET",
                 headers: headers,
                 success: function success(data) {    
                    myArrayOfPins = data.d.results;
                    console.log(myArrayOfPins);
                    for(var x=0; x<=myArrayOfPins.length; x++){
                        createPin(myArrayOfPins[x].Latitude,myArrayOfPins[x].Longitude,myArrayOfPins[x].Title)
                    }                                                                                                                                                                                                              
                 }
        });

  var map;

   function loadMapScenario() {

            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {                
          // center: new Microsoft.Maps.Location(50, -60), zoom: 4
        }); 
  }

  function createPin(latitude, longitude, mapTitle){

            var location = new Microsoft.Maps.Location(latitude, longitude);

            var pin = new Microsoft.Maps.Pushpin(location, {
                icon: '/sites/shots/PublishingImages/circle_yellow.png'
            });

          // Create the Infobox for the location
            var infobox = new Microsoft.Maps.Infobox(pin, { 
                title: mapTitle, 
                description: '<a href="/sites/shots/Pages/mypage.aspx">Site Info</a>',
                visible: false });
            infobox.setMap(map);
            Microsoft.Maps.Events.addHandler(pin, 'click', function () {
                infobox.setOptions({ visible: true });
            });

            map.entities.push(pin);

    }



    </script>

Answer 1

Here the issue is in the for loop.

The reason is myArrayOfPins is an array. So the index will start from 0. So, if we have 5 items then the value of x will be 0,1,2,3,4 so for the last item the index will be 5 after the increment but there is no item available and it throws the undefined error.

Update the <= to < forthis line. for(var x=0; x<myArrayOfPins.length; x++).

Here is the working code.

<script type="text/javascript">

        var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('mapItems')/items";
        var headers = {
                "accept": "application/json;odata=verbose"
            };

        var myArrayOfPins;
        $.ajax({
                 url: endPointUrl,
                 type: "GET",
                 headers: headers,
                 success: function success(data) {    
                    myArrayOfPins = data.d.results;
                    console.log(myArrayOfPins);
                    for(var x=0; x<myArrayOfPins.length; x++){
                        createPin(myArrayOfPins[x].Latitude,myArrayOfPins[x].Longitude,myArrayOfPins[x].Title)
                    }                                                                                                                                                                                                              
                 }
        });

  var map;

   function loadMapScenario() {

            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {                
          // center: new Microsoft.Maps.Location(50, -60), zoom: 4
        }); 
  }

  function createPin(latitude, longitude, mapTitle){

            var location = new Microsoft.Maps.Location(latitude, longitude);

            var pin = new Microsoft.Maps.Pushpin(location, {
                icon: '/sites/shots/PublishingImages/circle_yellow.png'
            });

          // Create the Infobox for the location
            var infobox = new Microsoft.Maps.Infobox(pin, { 
                title: mapTitle, 
                description: '<a href="/sites/shots/Pages/mypage.aspx">Site Info</a>',
                visible: false });
            infobox.setMap(map);
            Microsoft.Maps.Events.addHandler(pin, 'click', function () {
                infobox.setOptions({ visible: true });
            });

            map.entities.push(pin);

    }



    </script>