title: How to add Bing Maps v8 to Angular 2.0?
body: <p>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. The component I created couldn't be loaded. How do I reference  Microsoft.Maps.Map?</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;addOneLayerItemHTML&lt;/title&gt;
          &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='printoutPanel'&gt;&lt;/div&gt;
          
          &lt;div id='myMap' style='width: 100vw; height: 100vh;'&gt;&lt;/div&gt;
          &lt;script type='text/javascript'&gt;
              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);
                  
              }
          &lt;/script&gt;
          &lt;script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&amp;callback=loadMapScenario' async defer&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Her is the file I created as map.component.html.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='panel panel-primary'&gt;
      &lt;div class='panel-heading'&gt;
          {{pageTitle}}
      &lt;/div&gt;
       &lt;div id='myMap' style='width: 100vw; height: 100vh;'&gt;&lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the file I created as map.component.ts.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  }</code></pre>
  </div>
  </div>
  </p>