0

I'm working with Angular 9, and I'm trying to integrate bingmaps.

First step:

npm i bingmaps@2.0.3

Second step: we have to add bingmaps into tsconfig.json:

  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
 +     "bingmaps"
    ]
  },

Third step: start dev:

index.html:

<body>
  <app-root></app-root>
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&setMkt=fr-FR&setLang=fr' async defer></script>

</body>

map.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MapService {

  public PARIS_LOCATION = this.getMicrosoftLocation(48.8586, 2.294);

  getMicrosoftLocation(latitude: number, longitude: number): Microsoft.Maps.Location {
    return new Microsoft.Maps.Location(latitude,longitude);
  }

  //...

bing.maps.component.ts

  constructor(
    private mapService: MapService
  ) { }

  ngOnInit(): void {
      this.initMap();
  }


  initMap() {
    const options: Microsoft.Maps.IMapLoadOptions = {
      credentials: BING_MAPS_KEY,
    };
    this.map = new Microsoft.Maps.Map(document.getElementById('map'), options);

    let initialLocation = this.mapService.PARIS_LOCATION;
    this.mapService.setLocation(initialLocation, this.map);
  }

bing.maps.component.html

<div  id="map" style="height: 400px;"></div>

Result:

the bingmaps works perfectly when we start navigation in a page that doesn't contain bingmaps, So when we go to the bingmaps page, it works,

But When we start naviguation in the bingmaps page like we reload at bingmaps page, a console error occurs:

    ERROR Error: Uncaught (in promise): ReferenceError: Microsoft is not defined
ReferenceError: Microsoft is not defined
    at MapService.getMicrosoftLocation (map.service.ts:34)
    at new MapService (map.service.ts:14)
    at Object.MapService_Factory [as factory] (map.service.ts:60)
    at R3Injector.hydrate (core.js:16765)
    at R3Injector.get (core.js:16526)
    at NgModuleRef$1.get (core.js:35567)
    at R3Injector.get (core.js:16538)
    at NgModuleRef$1.get (core.js:35567)
    at Object.get (core.js:33358)
    at getOrCreateInjectable (core.js:5470)
    at MapService.getMicrosoftLocation (map.service.ts:34)
    at new MapService (map.service.ts:14)
    at Object.MapService_Factory [as factory] (map.service.ts:60)
    at R3Injector.hydrate (core.js:16765)
    at R3Injector.get (core.js:16526)
    at NgModuleRef$1.get (core.js:35567)
    at R3Injector.get (core.js:16538)
    at NgModuleRef$1.get (core.js:35567)
    at Object.get (core.js:33358)
    at getOrCreateInjectable (core.js:5470)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone.scheduleMicroTask (zone-evergreen.js:854)
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40772)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)

So, I am persuated that the project has to take a little time to make "Microsoft" be known for all component.

So for a temporary solution I delayed my initMap function by a setTimeout and it works fine now (also I delayed initializing PARIS_LOCATION in mapService):

setTimeout(()=>{
  this.initMap();
},4000)

But I'm searching for a clean solution.

After more debug, I'am persuaded that the problem is in index.html, We have to wait until the script of bingmaps finish loading to have Microsoft defined. So I'am searching now how to load script async.

Med Karim Garali
  • 923
  • 1
  • 14
  • 37
  • I don't see the definition for the GetMap callback included in the query params to the mapcontrol URL. Try this answer; it's for an older version of Angular, but the callback approach still should apply. https://stackoverflow.com/a/47141556/1058730 – drwestco May 09 '20 at 23:40
  • @drwestco I'am persuated that the problem is in index.html, We have to wait until the script added finish to provide for us Microsoft as defined. – Med Karim Garali May 09 '20 at 23:46
  • That's what the callback param is for. /mapcontrol?callback=GetMap - the map control script will invoke the global GetMap callback when the Microsoft namespace is ready to be used. Have you defined GetMap elsewhere? I'd be surprised if you don't see a script exception when the map control tries to call GetMap otherwise. – drwestco May 10 '20 at 01:49
  • @drwestco yeees that's the real problem, So how can I load this script and set the callback in Angular (that's the real question now) – Med Karim Garali May 10 '20 at 16:12
  • The answer I linked to in my first comment walks through exactly that. – drwestco May 10 '20 at 16:17

0 Answers0