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

CodePudding user response：

I would do the following to debug this issue:

1. Open dev console in browser, add a break point where you create the 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.
2. If the above doesn't solve your issue, it would be best to check your data (I'm assuming you have the coordinates stored somewhere). Double check you haven't reversed 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.