title: Why can't I load google maps in angular 2 component?
body: <p>Here is my ts component:</p>
  
  <pre><code>import {Component, OnInit,  Output, EventEmitter} from '@angular/core';
  
      declare var google: any;
  
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
  
  
      export class AppComponent implements OnInit {
        title = 'Dashboard';
        private map: any;
  
  
          constructor() {
            let brussels = new google.maps.LatLng(50.82, 4.35);
            var mapOptions = {
              zoom: 9,
              center: brussels
            };
            this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
  
            var marker = new google.maps.Marker({
              position: brussels
            });
            //google.maps.event.addListener(marker, 'click', ( () =&gt; this.select.next("i was a map click")) )
            marker.setMap(this.map);
  
          }
  
        ngOnInit(){
  
        }
  </code></pre>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
  &lt;/h1&gt;
  &lt;div id="googleMap"&gt;&lt;/div&gt;
  &lt;div id="legend-container"&gt;&lt;h3&gt;Legend&lt;/h3&gt;&lt;/div&gt;
  &lt;div id="info-box" style=""&gt;?&lt;/div&gt;
  </code></pre>
  
  <p>I declared in the main index.html the api key for google maps. The problem is that I cannot seem to load the google map into the component. There errors in the console are mainly the following:</p>
  
  <pre><code>error_handler.js:45 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: google is not definedErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
  error_handler.js:47 ORIGINAL EXCEPTION: google is not definedErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
  error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50(anonymous function) @ application_ref.js:209ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone_impl.js:43ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone_impl.js:34ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
  error_handler.js:51 ReferenceError: google is not defined
  </code></pre>
  
  <p>Any suggestion is highly appreciated :)</p>