How to fix Microsoft Bing API Maps error
-
08-02-2021 - |
سؤال
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>
المحلول
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>