Load BingMaps API on runtime

Question

I am trying to load the Bing Maps API during runtime of my JavaScript file. Here is what i have got so far, based on this.

var bingmap_link = 'https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario';
$.when(
  $.getScript(bingmap_link),
  $.Deferred(function( deferred ){
    $( deferred.resolve );
  })
)
.done(function() {
  console.log("done");
  load_bing_map();
});

But i will get the following error

TypeError: Microsoft.Maps.NetworkCallbacks.f_logCallbackRequest is not a function

So I tried another attempt:

$('head').append('<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario" async defer></script>');

load_bing_map();

But I am again running in errors:

jQuery.Deferred exception: n is null k@https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario:12:7416

In both cases the load_bing_map() function looks like this.

function load_bing_map() {
  var map = new Microsoft.Maps.Map('#mymap', {
    credentials: 'MyKey'
  });
}

The code is executed after the $().ready trigger is fired.

What am I missing?

Finally I do not need a solution like

<head>
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
</heady>

I can only do it during runtime.

rbrundritt · Accepted Answer · 2017-08-24 15:34:30Z

4

You are specifying a callback function in the map script URL but don't have a function with that name in your code. That is causing the error you seeing. Additionally, the code you have will not work as is. The map control loads a bunch of resources asynchronously. As such, then the done function in your could is reached, only the initial javascript file has been loaded, none of the other resources has, so the map API is not available yet. Here is a code sample that shows how to lazy load the map API: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Lazy%20Loading%20the%20Map.html

You can try it out here: http://bingmapsv8samples.azurewebsites.net/#Lazy%20Loading%20the%20Map

answered Aug 24, 2017 at 15:34

rbrundritt

18.2k2 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Torben Over a year ago

Works perfectly. Thanks :)

Collectives™ on Stack Overflow

Load BingMaps API on runtime

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related