How fetch JSON from Bing Maps API?

0
votes

I want to use the Bing Maps API to get the coordinates of a location or an address using Javascript.

I generated the request as follows: http://dev.virtualearth.net/REST/v1/Locations?CountryRegion=DE&locality=Munich&addressLine=1%20Schloss%20Nymphenburg&maxResults=1&key={myKEY}

When I open manually the link, I see a JSON-File like this:

When I open manually the link, I see a JSON-File like this

But how can I fetch this file, to get the coordinates?

I tried the following code, to show the data on the console, but nothing happens.

var req = new Request(request);
fetch(req)
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log(text);
  });

Do I have to import special libraries or is it just the wrong way of doing it?

3
javascriptapibing-mapsbing-api
"but nothing happens" — No error messages? - Quentin
var req = new Request(request); — request is undefined there. - Quentin
Just nothing happens, also no error messages. I defined the variable request before that code snippet with the link inside. - sMair101
Exists there maybe a workaround like opening the link in the background and reading then the data? - sMair101

3 Answers

1
votes

let data = fetch('http://dev.virtualearth.net/REST/v1/Locations?CountryRegion=DE&locality=Munich&addressLine=1%20Schloss%20Nymphenburg&maxResults=1&key=%7BmyKEY%7D')
  .then(response => console.log("res: ", response))
  .catch(err => console.log("err: ", err));
  
  console.log(data)
  
 //console.log(data["resourceSssSets"]["0"]["resources"]["0"]["point"]["coordinates"])
 
/* 
{
"resourceSssSets":{
      "0": {
      "resources" :{
          "0" :{
              "point":{
                
                "coordinates": {
                  "0": "",
                  "1": ""
                }
              }
          }
      }
    } 

  }
}
*/
0
votes

the result you have is in the following form

{
  "resourceSssSets":{
  "0": {
  "estimatedTotal": 1,
  "resources" :{
    "0" :{
      "__type" : "location....",
      "bbox" {
        "0": "000",
        "1": "000",
        "3": "000",
        "4": "0000",
        "name": "name"
      },
      "point":{
        "type": "point",
        "coordinates": {
          "0": "",
          "1": ""
        },
        "address": {
          
        }
      }
    }
  }
  }

 }
 }

A json array now it's up to you to see what you want to collect

0
votes

Here is how to you would make the request and process the result:

var req = 'http://dev.virtualearth.net/REST/v1/Locations?CountryRegion=DE&locality=Munich&addressLine=1%20Schloss%20Nymphenburg&maxResults=1&key={yourKey}';

fetch(req)
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(JSON.stringify(data));
    
    if(data.resourceSets && data.resourceSets.length > 0 && data.resourceSets[0].resources && data.resourceSets[0].resources.length > 0){
        var firstResult =  data.resourceSets[0].resources[0];
        var latitude = firstResult.point.coordinates[0];
        var longitude = firstResult.point.coordinates[1];
        
        //Do something with this data.
    }   
  })

Note I'm passing in the URL as a string, and am calling response.json() instead of response.text()