ReferenceError: "google is not defined"

Question

I use Angular Google Maps to display a google map in my angular 7 app.

I needed google maps typings to do something like this:

allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(51.130739, -0.868052), // SW
    new google.maps.LatLng(51.891257, 0.559417) // NE
);

So I did npm install --save-dev @typings/googlemaps

I tried many different things to try to resolve the error but none worked for me.

import {} from 'googlemaps'
declare const google: any;

In tsconfig.json I have "typeRoots": ["node_modules/@types"] and in tsconfig.app.json "types": ["googlemaps"]

The app compiles without errors but in chrome console I get an error:

ERROR ReferenceError: "google is not defined"

If you're able to compile without issue, you don't have a problem with your @types configuration. Your browser is saying google is not defined. Have you included the scripts that define google globally, and are they loaded before this script is executed? — joh04667
– joh04667, Commented Jan 18, 2019 at 20:31

Vadim Gremyachev · Accepted Answer · 2019-01-20 20:56:13Z

22

This error most likely occurs since the moment when allowedBounds is getting initialized, Google Maps API is not yet loaded and therefore Google Maps objects like google.maps.LatLngBounds are not yet available. agm-map ships with loader which loads Google Maps library asynchronously.

In order to ensure Google Maps API is loaded, MapsAPILoader service could be utilized as demonstrated below:

export class AppComponent  {
  bounds = null;

  constructor(private mapsAPILoader: MapsAPILoader) {
    this.mapsAPILoader.load().then(() => {
      this.bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(51.130739, -0.868052), // SW
        new google.maps.LatLng(51.891257, 0.559417) // NE
      );
      console.log(this.bounds);
    });
  }

}

Here is a demo which demonstrates how to fit a map for a given bounds

answered Jan 20, 2019 at 20:56

Vadim Gremyachev

59.6k21 gold badges139 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Duck Ling Over a year ago

looks like @agm/core (newest ver as of 24/07/2021) uses the old types present in the deprecated pkg @types/googlemaps and not the newer one (@types/google.maps). Is there a new reccomended way of embedding g.maps into angular app?

Smaillns Over a year ago

@DuckLing check this one smaillounes.medium.com/…

Collectives™ on Stack Overflow

ReferenceError: "google is not defined"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related