title: Angular - Google is not defined?
body: <p>Hi I am trying to implement <code>google maps api</code> in <code>angular</code>. It was pretty simple in <code>angularjs</code> but I cant figure out whats not working. I have a simple app which is showing products along with their location. Upon clicking location the location does show on map. But to shop map I am using <code>google maps</code>. I have done quite much. But this error is keep coming. </p>
  
  <pre><code>google is not defined
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>    import { Component } from '@angular/core';
  import { Observable } from 'rxjs/Rx';
  import { ProductService } from './product.service';
  declare var google: any;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ProductService]
  })
  export class AppComponent {
  
    //define an array of products
    products = [];
  
    //constructor func
    constructor(private _productService: ProductService) { }
  
    //after constructor func this func runs , in which we are
    // accessing the class function getproducts and objects products
    // through this.
    // =&gt; means callback in which we are dumping data in products
    //array
    ngOnInit() {
      this._productService.getProducts()
        .subscribe(products =&gt; { this.products = products[0].data; console.log(this.products); })
  
      var map;
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
  
    }
  
  }
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Shopober&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?key=xxxxx" async defer&gt;
  
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code> &lt;table id="products"&gt;
      &lt;tr&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Product Name&lt;/th&gt;
        &lt;th&gt;Price&lt;/th&gt;
        &lt;th&gt;In Stock&lt;/th&gt;
        &lt;th&gt;Location&lt;/th&gt;
        &lt;th&gt;Image&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor="let product of products"&gt;
        &lt;td&gt;{{product.id}}&lt;/td&gt;
        &lt;td&gt;{{product.product_name}}&lt;/td&gt;
        &lt;td&gt;{{product.product_price}}&lt;/td&gt;
        &lt;td&gt;{{product.product_stock}}&lt;/td&gt;
        &lt;td&gt;
          &lt;a&gt;{{product.location[0].lat + ',' + product.location[0].lng}}&lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;{{product.product_image}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>