Question

114

Angular - Google is not defined?

rated 0 times [ 116] [ 2] / answers: 1 / hits: 20004 / 7 Years ago, thu, november 9, 2017, 12:00:00

Hi I am trying to implement google maps api in angular. It was pretty simple in angularjs 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 google maps. I have done quite much. But this error is keep coming.

google is not defined

app.component.ts

    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.

  // => means callback in which we are dumping data in products

  //array

  ngOnInit() {

    this._productService.getProducts()

      .subscribe(products => { 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

    });



  }



}

Index.html

    <!doctype html>

<html lang=en>



<head>

  <meta charset=utf-8>

  <title>Shopober</title>

  <base href=/>



  <meta name=viewport content=width=device-width, initial-scale=1>

  <link rel=icon type=image/x-icon href=favicon.ico>

</head>



<body>

  <app-root></app-root>

  <script src=https://maps.googleapis.com/maps/api/js?key=xxxxx async defer>





  </script>

</body>



</html>

app.component.html

 <table id=products>

    <tr>

      <th>Id</th>

      <th>Product Name</th>

      <th>Price</th>

      <th>In Stock</th>

      <th>Location</th>

      <th>Image</th>

    </tr>

    <tr *ngFor=let product of products>

      <td>{{product.id}}</td>

      <td>{{product.product_name}}</td>

      <td>{{product.product_price}}</td>

      <td>{{product.product_stock}}</td>

      <td>

        <a>{{product.location[0].lat + ',' + product.location[0].lng}}</a>

      </td>

      <td>{{product.product_image}}</td>

    </tr>

  </table>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

roberts

Add To Favorites

Follow

Total Points: 212

Total Questions: 101

Total Answers: 101

Location: Philippines

Member since Thu, Apr 14, 2022

2 Years ago

answered 7 Years ago trayvon · Accepted Answer

You have to wait the view initialization before loading the google maps script. You can do it with the AfterViewInit hook, like this :

import {AfterViewInit, Component} from '@angular/core';

...

export class YourComponent implements AfterViewInit {



  ngAfterViewInit(): void {

    // Load google maps script after view init

    const DSLScript = document.createElement('script');

    DSLScript.src = 'https://maps.googleapis.com/maps/api/js?key=xxxxx'; // replace by your API key

    DSLScript.type = 'text/javascript';

    document.body.appendChild(DSLScript);

    document.body.removeChild(DSLScript);

  }