At the moment I'm working on a project in which I'm supposed to show various customers worldwide on a map. I determine the coordinates of these customers using the Bing Maps API. But if I then want to display these customers on the map, I get the error for some that the coordinates are wrong. The coordinates in the database look correct and are returned to me by the Bing Maps API.
Now to the question: How do I catch this error so that the script doesn't crash because of it?
let map;
let searchManager;
let customers = <?= json_encode($elements); ?>;
let pins = [];
let iconURL = '';
function GetMap() {
var statusDropdownValue = parseInt($('#status').val());
map = new Microsoft.Maps.Map('#map', {
zoom: 1
});
$.each(customers, function(index, value) {
var customerLocation = new Microsoft.Maps.Location(value['latitude'], value['longitude']);
var pin = new Microsoft.Maps.Pushpin(customerLocation, {
icon: baseURL + 'assets/images/pin.png'
});
pin.metadata = {
id: value['id'],
customerName: value['customer_name'],
postCode: value['post_code'],
city: value['city'],
countryCode: value['country_code']
};
pins.push(pin);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
var manager = new Microsoft.Maps.AutosuggestManager({ map: map });
manager.attachAutosuggest('#search', '#search-container-search-bar', selectedSuggestion);
});
}
Error:
Uncaught Error: Invalid latitude
n https://r.bing.com/rp/iKR9c24bDSIz79-enVSnBoJvZx8.br.js:1
GetMap http://localhost/projects/BattermannTillery_HK_Locator/maps:101
each jQuery
GetMap http://localhost/projects/BattermannTillery_HK_Locator/maps:100
notifyMapReadyForBootstrap https://www.bing.com/api/maps/mapcontrol?callback=GetMap&setMkt=en-US&setLang=en&key=AlV57vXOvuSENqgwu6hnNKGhiLf85dbTMlnDY81z2cGq40L1xkMdXUVSkEhvqfvv:12
<anonymous> https://r.bing.com/rp/RENSVX2edu6CiHiu-aMi-GbtqbA.br.js:1
<anonymous> https://r.bing.com/rp/RENSVX2edu6CiHiu-aMi-GbtqbA.br.js:1
I would do the following to debug this issue:
Location
object. Check to see if value['latitude']
is a string number or an actual number ("1" vs 1). If it is a string, wrap value['latitude']
, value['longitude']
with parseFloat
like (parseFloat(value['latitude'])
. This is the most common cause of this type of error.latitude
and longitude
values (take a couple of entries and manually search for them on bing.com/maps and check the coordinates to verify what you have in your lat/lon columns is in the same general area). If you can query your dataset (is it a database?), you can check all latitude and longitude values. Latitude values should be between -90 and 90 degrees, and longitude between -180 and 180. If you find anything outside of this range it will be either due to bad data, or you have latitude/longitude values swapped in your data.