tonyjy tonyjy - 6 months ago 175
Javascript Question

How to add Bing Maps v8 to AngularJS 2.0?

I want to add Bing Map V8 control to my AnguarJS 2.0 project. I want to know what I need to do to add Bing Map V8 into AngularJS 2.0 project. I have attached my implementation. The component I created couldn't be loaded. How do I reference Microsoft.Maps.Map?

Here is an example of the bing map v8. Everything works well if saving the following example as HTML. The bing map key was clipped.



<!DOCTYPE html>
<html>
<head>
<title>addOneLayerItemHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='printoutPanel'></div>

<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Map Key - I removed here'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>
</body>
</html>





Her is the file I created as map.component.html.



<div class='panel panel-primary'>
<div class='panel-heading'>
{{pageTitle}}
</div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
</div>





Here is the file I created as map.component.ts.



import { Component, OnInit } from 'angular2/core';

@Component({
selector: 'pm-map',
templateUrl: 'app/bingmap/map.component.html'
})

export class MapComponent implements OnInit {
public pageTitle: string = "Map";

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
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);
}




Answer

Your code is almost ok, you just need few modifications

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

<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
    function loadMapScenario() {
        var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'My Bing Map Key - I removed here'
        });
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
        var layer = new Microsoft.Maps.Layer();
        layer.add(pushpin);
        map.layers.insert(layer);
    }
</script>

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

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

To be:

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

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

@Component({
    selector: 'pm-map',
    template: `
    <div class='panel panel-primary'>
      <div class='panel-heading'>
          {{pageTitle}}
      </div>
      <div #myMap style='width: 100%; height: 500px;'></div> 
    </div>`
})
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