How to add Bing Maps v8 to Angular 2.0?

Question

I want to add Bing Map V8 control to my Anguar 2.0 project. I want to know what I need to do to add Bing Map V8 into Angular 2.0 project. I have attached my implementation.

Answer 1

Your code is almost ok, you just need few modifications

1- in index.html remove the callback function and the div

Also, in index.html, remove the callback parameter from the script import.

To be:

Now, you have the script loaded, all you need to do is create the map in your component

@Component({
    selector: 'pm-map',
    template: `
    

      

          {{pageTitle}}
      
      
 
    
`
})
export class MapComponent implements OnInit {
  @ViewChild('myMap') myMap; // using ViewChild to reference the div instead of setting an id
  public pageTitle: string = "Map";

  ngAfterViewInit(){  // after the view completes initializaion, create the map
    var map = new Microsoft.Maps.Map(this.myMap.nativeElement, {
        credentials: 'Bing Map Key - I removed it here'
    });
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
    var layer = new Microsoft.Maps.Layer();
    layer.add(pushpin);
    map.layers.insert(layer);
  }
}

check it in this plunk