title: Unknown "google is not defined" Google Maps integration in Angular 6
body: <p>Here's the context of the problem I am trying to solve: I am trying to program a google map integration with a heat map overlay. It currently should be a visible map centered in San Francisco (later I will add a button to overlay the heat map and toggle the heat map). Yet, I keep getting this error in my console stating: </p>
  
  <p>ERROR ReferenceError: google is not defined
      at HeatMapComponent.push../src/app/heat/heat-map/heat-map.component.ts.HeatMapComponent.ngOnInit</p>
  
  <p>Here is the code for my angular component:</p>
  
  <p>heat-map.component.ts</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import {   } from '@types/googlemaps';
  
  
  
  @Component({
  selector: 'app-heat-map',
  templateUrl: './heat-map.component.html',
  styleUrls: ['./heat-map.component.css']
  })
  export class HeatMapComponent implements OnInit {
    @ViewChild("gmap") gmapElement: any;
  
    public heatmapData: Array&lt;google.maps.LatLng&gt;;
    public verb: google.maps.LatLng;
    public map: google.maps.Map;
  
    public heatmap: google.maps.visualization.HeatmapLayer;
    public heatMapON: boolean;
  
    constructor() { }
  
    ngOnInit() {
       this.heatmapData = [
          new google.maps.LatLng(37.2, -122.7),
          new google.maps.LatLng(37.2, -122.5),
       ];
  
       this.cool = new google.maps.LatLng(37.2, -122.04);
  
       var mapProp = { center: this.cool, zoom: 3, mapTypeId: 
                   google.maps.MapTypeId.SATELLITE };
  
       this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  
       this.heatmap = new google.maps.visualization.HeatmapLayer({
                      data: this.heatmapData
       });
  
       this.heatMapON = false;
       }
  
    toggleHeatMap(event){
       console.log("Heat Map is now overlayed on google Map", event)
       this.heatMapON = !this.heatMapON
       if (this.heatMapON) {
          this.heatmap.setMap(this.map);
       }
       else {
          this.heatmap.setMap(null)
       }
    }
  }
  </code></pre>
  
  <p>heat-map.component.css</p>
  
  <pre><code> #gmap {
       height: 400px;
       width: 100%;
   }
  </code></pre>
  
  <p>heat-map.component.html</p>
  
  <pre><code> &lt;div #gmap&gt;&lt;/div&gt;
   &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&amp;libraries=visualization"&gt;
   &lt;/script&gt;
  </code></pre>
  
  <p>And nothing of this component is displayed on my localhost.</p>