Angular 4 Bing Maps V8 Web Controls Setup issue RRS feed

  • Question

  • Currently am loading "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashxv=7.0" in index.html and am able to call 

    map = new Microsoft.Maps.Map() in my component without any errors and the page loading the map.

    When I switch to V8, I call 'http://www.bing.com/api/maps/mapcontrol' in index.html and am getting the error "Microsoft is not defined" when calling the same function as above. Is there any other changes that need to be made in an Angular 4 project to use the Microsoft Bing functions?

    Wednesday, August 23, 2017 5:27 PM


All replies

  • Yes, I am having the same issue and the same setup as the stackoverflow

    I am loading the script and consoling out Microsoft which gives me all the definitions. But when I try Microsoft.Maps.Map(), I get the error "Cannot read property 'prototype' of null". Any ideas on how else to load this in an angular 4 application?

    Thursday, August 24, 2017 2:49 PM
  • The map API script likely isn't fully loaded yet and thus you are accessing it before all the required classes as available. You need to use specify a callback function in the map script URL which will fire once the map API has been fully loaded. Here is an example: https://stackoverflow.com/questions/37550278/how-to-add-bing-maps-v8-to-angular-2-0

    Here is another example that shows how to simply lazy load the map control which will work in any application: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Lazy%20Loading%20the%20Map.html

    [Blog] [twitter] [LinkedIn]

    Thursday, August 24, 2017 4:05 PM
  • The first stackoverflow leads to the same error I am getting. 

    If I lazy load it using the second option, how do I pass the variable map to my component after it has been initialized?

    I would like to initialize Microsoft.Maps.Map() in my typescript component. By initializing it in my index.html file I am not able to edit map.
    • Edited by cberard Thursday, August 24, 2017 4:15 PM
    Thursday, August 24, 2017 4:11 PM
  • Create your own callback function and tie it into your Angular code. For reference you may want to take a look at this open source Bing Maps Angular library:


    [Blog] [twitter] [LinkedIn]

    Thursday, August 24, 2017 4:29 PM
  • I don't want to use a third party when it should be able to directly from my Component. 


    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental'></script>


    ngOnInit() {


    this.map =new Microsoft.Maps.Map(document.getElementById('myMap'), {

    credentials: 'My Bing Maps Key'


    <div id="myMap" style="width:600px;height:400px;"></div>

    As you can see Microsoft is defined and has all the props that are expected but when I try to initialize the map I get the error above.

    • Edited by Ricky_Brundritt Thursday, August 24, 2017 6:06 PM removing users key
    Thursday, August 24, 2017 5:26 PM
  • The ngOnInit function fires way before the page is loaded and before the Map API is even loaded, thus the error you are seeing. The whole namespace may be available, but all the functionality that powers it is not yet finished loading. You don't need to use that 3rd party library, just take a look at how they are loading the map. 

    Take a look at the Bing Maps service code: https://github.com/infusion-code/angular-maps/blob/95a372a8539098e831549283d1f1ab3a35b061dd/src/services/bing/bing-map.service.ts

    There is a CreateMap function where the map control is loaded. Work backwards from there. In the Map.ts file there is a InitMapInstance function which calls the CreateMap function and wraps it this._zone.runOutsideAngular(() => {});

    [Blog] [twitter] [LinkedIn]

    Thursday, August 24, 2017 6:08 PM
  • You were correct, the component was trying to load the Microsoft api before it had fully been loaded. I ended up adding a listener to document.ready to load that component once the state was complete
    Thursday, August 24, 2017 8:23 PM