Microsoft.Maps.loadModule is not a function

[drewteachout]

Is there a reason I am getting this error? I was trying to load SpatialMath because my application wouldn't recognize getGeodesicPath and getHeading because I assumed it wasn't loading the SpatialMath module.

These are my import statements

/// <reference  path="..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Microsoft.Maps.d.ts"/>
/// <reference  path="..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Modules\SpatialMath.d.ts"/>

This is my block of code where the error occurs:

Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath',() => {
    this.generateLines();
});

[rbrundritt]

I suspect the issue is the "this" may not have the same context in the callback function. Try this:

var self = this;
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath',() => {
self.generateLines();
});

[drewteachout]

The error says Uncaught TypeError: Microsoft.Maps.loadModule is not a function. It's occuring before the code gets to this.generateLines(). I tried your solution, but had no luck. Still getting the same error

[drwestco]

How are you loading the Maps SDK? Can you share a small but complete code sample that demonstrates this?

…

On Dec 6, 2017, at 4:59 AM, Drew Teachout ***@***.***> wrote: The error says Uncaught TypeError: Microsoft.Maps.loadModule is not a function. It's occuring before the code gets to this.generateLines(). I tried your solution, but had no luck. Still getting the same error — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[rbrundritt]

Have you added a script reference to the Bing Maps API?

<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=YourBingMapsKey' async defer></script>

Note that this project is on the typescript definitions, not the actual API. You need to add a script reference to the Bing Maps API to your application.

[drewteachout]

I've only seen how to do that in javascript. How do you add a script reference in typescript, specifically an Angular 2+ application?

[rbrundritt]

Your application must have some HTML somewhere, you can add the script tag there. Here is a basic example: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Other/Basic%20Angular%201.6%20Map.html

There is also an Angular 2 example here: https://stackoverflow.com/questions/37550278/how-to-add-bing-maps-v8-to-angular-2-0

Don't worry about these samples putting their code in JavaScript, TypeScript is converted into JavaScript when you build your app, so it makes no real difference.

You can also lazy load the map control in JavaScript if you prefer: https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Map/Lazy%20Loading%20the%20Map.html