1

I tried to implement bing map in angular 4. I used angular-map package but it throws Microsoft reference issue. Please see the below code and share the example

import { Component,OnInit, ViewChild } from '@angular/core';
import { BingMapsLoader } from '../../shared/services/map-loader-service';

@Component({
  selector: 'pm-map',
  template: `
  <app-bing-map *ngIf='mapReady'></app-bing-map>`
})

export class DeviceMapComponent implements OnInit{
  mapReady = false;
      constructor() {
          BingMapsLoader.load()
              .then(res => {
                  console.log('BingMapsLoader.load.then', res);
                  this.mapReady = true;
          });
      }
      ngOnInit() {
        if (typeof Microsoft !== 'undefined') {
            console.log('BingMapComponent.ngOnInit');
            this.map = new Microsoft.Maps.Map(document.getElementById('mapId'),{
              credentials: 'Your Bing Maps Key Here',
          });
        }
      }   
    }
}
ewolden
  • 5,722
  • 4
  • 19
  • 29
Amit Khese
  • 102
  • 11

1 Answers1

1
import { } from "bingmaps/scripts/MicrosoftMaps/Microsoft.Maps.All"

This needs to be imports to get access of Microsoft reference.

Amit Khese
  • 102
  • 11