Angular 4 Bing Maps V8 Web Controls Setup issue

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?

Answer 1

Have you taken a look at this thread: https://stackoverflow.com/questions/45825732/can-not-read-property-prototype-of-null-bing-maps-and-angualar4 

---

[Blog] [twitter] [LinkedIn]

Answer 2

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?

Answer 3

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]

Answer 4

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.

Answer 5

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:

https://github.com/infusion-code/angular-maps

---

[Blog] [twitter] [LinkedIn]

Answer 6

I don't want to use a third party when it should be able to directly from my Component. 

index.html:

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

component:

ngOnInit() {

console.log(Microsoft)

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

credentials: 'My Bing Maps Key'

})}

.html 

<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.

Answer 7

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]

Answer 8

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