Angular - Google is not defined?

angular google maps
error referenceerror: google is not defined
script5009 google is undefined
is not defined in angular 5
uncaught referenceerror: google is not defined google charts
richmarker is not defined
_xdc_ is not defined
referenceerror: google is not defined in vuejs

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>

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);
  }

[SOLVED] ReferenceError: google is not defined, Hello guys, i know this error is pretty common but i still have no idea ReferenceError: google is not defined - ionic v3.9.2, angular v5.2.11. Ajax Angular Apache-Commons-IO BufferedReader Database DB2 DerbyDB Eclipse faces-config.xml file Files hibernate IPC Java JavaScript JPA JQuery JSF JVM Liferay liferay-display.xml liferay-hook.xml liferay-plugin-package.properties liferay-portlet.xml Liferay IDE Liferay m2e Liferay plugin M2Eclipse Maven MySQL Oracle portal-ext.properties

Trying implementing -

import GoogleMaps from 'google-maps';

After importing google-maps use below code:

GoogleMaps.KEY = <your map api key>;
GoogleMaps.load((google) => {
  // place your code here
});

Angular Uncaught ReferenceError: google is not defined, Learn how to solve the error Angular Uncaught ReferenceError: google is not defined when integrating google maps in your Angular  Like --> GoogleMapsLoader, checks if google and google.maps is already on the window object, if not --> add the async scripttag with your api key. Add a google maps callback which triggers an event or somethingelse so you get notified, if google is or is already is initialised. No hacky index.html manipulating.

It looks like your components load before the google script. There is a great angular2+ plugin for google maps : https://github.com/SebastianM/angular-google-maps

Did you check it out ? It allows you to do all the common stuff with google maps, and avoid the common loading and other errors.

google is not defined · Issue #43 · angular-ui/ui-map · GitHub, hi am using google maps in my application its working fine when i run it locally but when i run it on server its giving me the following error. help  ReferenceError: google is not defined Double check to make sure that your Google Maps js is loaded after angular-ui-map:

Try wrapping the initialization inside a setTimeout() function like below:

ngOnInit(){
 setTimeout(()=> {
 // Put the logic here 


 }, 1000);
}

Google Maps: ReferenceError: google is not defined. · Issue #293 , html and after run the app i've got an error. My code snippets: import { Component } from '@angular/core'; import { NavController } from 'ionic-  lazy-init for not showing map without a user intervention. For example, if you want to show hundreds of maps in a single page, but do not want to initialize any one of map until you an image. It stands by to be initialized with user intervention, but still requires google object. map-lazy-load loads

Angular 7 - google is not defined (Google Maps) - angular - html, I'm assuming you already have your angular application set up and your google maps api key. If not, go do that quickly and come back here :). The google and google.maps namespaces are correctly defined. The google.maps.LatLngBounds function exist. But the variable newBounds is set to undefined, so the next line newBounds.union(bounds)fails. Why not have var newBounds = new google.maps.LatLngBounds();? 👍

Setup Google Maps in an Angular App - Noteworthy, Google is not defined angular. NET Core you can specify this value (the default is signin-google). Feb 04, 2016 · lazy-init for not showing map without a user  As ui-grid.js is dependent on angular.js, ui-grid requires angular.js by the time its loaded. But in the above case, ui-grid.js [locally saved reference file] is loaded before angularjs was loaded [from internet], The problem was solved if I had both angular.js and ui-grid referenced locally and as well declaring angular.js before ui-grid

Google is not defined angular, Ciao Nicola,. I am using AFC to embed google maps, but with SCK installed I got the Uncaught ReferenceError: google is not defined error. Just to be sure I've  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Comments
  • You want me to make another ts file and write this code ? Or can i do this in my app.comp.ts
  • Add it in the component that contain the google maps code!
  • Cannot find name 'AfterViewInit'.
  • same error. I did it something like this export class Appcomponent implement AfterViewInit { products = []; constructor(private _productService: ProductService) { } ...... Your code }
  • Yes, it's the normal behavior of google maps, you have to set a fixed height in px, or resize the container too. Check this thread fot that : stackoverflow.com/questions/10209704/…
  • dont want to use any plugin. Please explain with respect to orignal maps api
  • i know this plugin but i dont want to use it
  • I'm not sure if suggesting a plugin without some additional explanations is a good answering practice.
  • Yeah, you're probably true. I'll add some details, sorry !