SDK for Bing Maps

Question

I am currently creating an SDK to use Bing Maps. When I run the SDK, the bing map isn't show.

The file "component.js" contains the following:

define(["sap/designstudio/sdk/component","d3"], function(Component,d3, unusedDummy) {
Component.subclass("com.xxx.bingmaps.BingMaps", function() {

 this.init = function() {

    var url = 'http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_BING_KEY]'; 

        const script = document.createElement("script");
        script.type = 'text/javascript';
        script.src = url; 
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);

        function GetMap() {
            this.map = new Microsoft.Maps.Map('#myMap', {
              center: new Microsoft.Maps.Location(52.527222, 13.4225),
              mapTypeId: Microsoft.Maps.MapTypeId.aerial,
              zoom: 10
          });

        };
    };

   });
});

In the file "contribution.xml" this is called by the following code

<requireJs modes="commons m">res/js/component</requireJs>

Does anyone have a hint where the error lies?

Kind regards, Timo

Here is my new code:

define(["d3", "sap/designstudio/sdk/component"], function(d3, Component) {  

function GetMap() {
    var map = new Microsoft.Maps.Map('#BingMaps', {         
    center: new Microsoft.Maps.Location(52.527222, 13.4225),
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    zoom: 10
    });
};   

Component.subclass("com.xxx.bingmaps.BingMaps", function() {

    this.init = function() {

        var url = 'https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_KEY]'; 

        const script = document.createElement("script");
        script.type = 'text/javascript';
        script.src = url; 
        script.async = true;
        script.defer = true; 
        document.head.appendChild(script);

    };
      GetMap();

});
});

score 0 · Answer 1 · answered Nov 12 '19 at 00:36

0

The GetMap function is inside the init function and not a global function. As such, when the map script URL is loaded, it can't find/access the GetMap function. A couple of options:

Make the GetMap function global.
Load the script URL synchronously and call the code to load the map inline.

answered Nov 12 '19 at 00:36

rbrundritt

16,570
2
21
46

Thanks for your answer. I changed the code like below. Now, the function „getMap“ is called, but I get an error: Microsoft is not defined ReferenceError: Microsoft is not defined at GetMap. – Timo Nov 13 '19 at 10:00
After your init function you have a call to GetMap. Remove that as it is firing before the map script is loaded. GetMap will be called by the Bing Maps API when the script loads. – rbrundritt Nov 13 '19 at 18:41

score 0 · Accepted Answer · answered Nov 22 '19 at 08:00

In the meantime, I have fixed my problem like below.

File contribution.xml:

<jsInclude>http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[MY_KEY]</jsInclude>     
<jsInclude>res/js/component.js</jsInclude>

File component.js:

sap.designstudio.sdk.Component.subclass("com.xxx.bingmaps.BingMaps", function() {

this.init = function() {
    var mapOptions = { center: new Microsoft.Maps.Location(LAT, LONG),
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
         zoom: 15 };
    this.map = new Microsoft.Maps.Map(this.$()[0], mapOptions);             
    };
});

Now, the bing map is displayed.

SDK for Bing Maps

2 Answers2