0

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 enter image description here

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>
4
  • Can you please print myArrayOfPins[x] in the console? and provide the screenshot. Nov 5, 2019 at 5:18
  • I updated the image in the original question. Thanks!
    – OLA
    Nov 5, 2019 at 11:51
  • Did the answer help? Nov 6, 2019 at 17:28
  • Thank you. I can't believe I missed something so small.
    – OLA
    Nov 7, 2019 at 2:35

1 Answer 1

2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.