title: Angular 2 google map implementation
body: <p>I'm new to angular 2. I wanted to use google map API for direction service and implemented the example shown in <a href="https://developers.google.com/maps/documentation/javascript/examples/directions-simple" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/examples/directions-simple</a> to my project as shown below code. 
  But for some reason the map is not loading. Can someone help me with this?</p>
  
  <p><strong>map.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Directions service&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 500px;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 500px;
        }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;        
      &lt;div id="floating-panel"&gt;
      &lt;b&gt;Start: &lt;/b&gt;
      &lt;select id="start"&gt;
        &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
        &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
        &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
        &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
        &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
        &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
        &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
        &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
        &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
        &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
        &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
        &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
      &lt;/select&gt;
      &lt;b&gt;End: &lt;/b&gt;
      &lt;select id="end"&gt;
        &lt;option value="chicago, il"&gt;Chicago&lt;/option&gt;
        &lt;option value="st louis, mo"&gt;St Louis&lt;/option&gt;
        &lt;option value="joplin, mo"&gt;Joplin, MO&lt;/option&gt;
        &lt;option value="oklahoma city, ok"&gt;Oklahoma City&lt;/option&gt;
        &lt;option value="amarillo, tx"&gt;Amarillo&lt;/option&gt;
        &lt;option value="gallup, nm"&gt;Gallup, NM&lt;/option&gt;
        &lt;option value="flagstaff, az"&gt;Flagstaff, AZ&lt;/option&gt;
        &lt;option value="winona, az"&gt;Winona&lt;/option&gt;
        &lt;option value="kingman, az"&gt;Kingman&lt;/option&gt;
        &lt;option value="barstow, ca"&gt;Barstow&lt;/option&gt;
        &lt;option value="san bernardino, ca"&gt;San Bernardino&lt;/option&gt;
        &lt;option value="los angeles, ca"&gt;Los Angeles&lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        function initMap() {
          var directionsService = new google.maps.DirectionsService;
          var directionsDisplay = new google.maps.DirectionsRenderer;
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
          });
          directionsDisplay.setMap(map);
  
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('start').addEventListener('change', onChangeHandler);
          document.getElementById('end').addEventListener('change', onChangeHandler);
        }
  
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          directionsService.route({
            origin: document.getElementById('start').value,
            destination: document.getElementById('end').value,
            travelMode: 'DRIVING'
          }, function(response, status) {
            if (status === 'OK') {
              directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        }
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>MapComponent</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'map',
      templateUrl: 'app/dashboard/features/map.html'
  }) 
  
  export class MapComponent {}
  </code></pre>