How to solve ReferenceError: google is not defined in Angular without using scripts?

Question

I asked this question on how to solve ReferenceError: google is not defined. The most important part of the code is the following:

ngOnInit() {
        this.someContentWithAddress$ = this.someServiceWithContent.someContentWithAddress$.pipe(
            tap(someContentWithAddress => {
                this.address = someContentWithAddress.address;
                setTimeout(() => {
                    this.calculateAddress(this.address);
                }, 1000);
            })
        );
    }

I'm using setTimeout() to solve the error, but it seems to me that this approach is not a good one.

Also the answer in the recommended post doesn't work for me (still getting the same error). I also don't want to use scripts to solve the problem.

Is there another way (that hopefully also works) to solve it?

Yes your right. My bad. I meant without using a script. will edit my question — Constantin Beer, Oct 07 '19 at 06:44
Have you tried the second answer of wrapping it in a setTimeout? — Dhananjai Pai, Oct 07 '19 at 06:48
Are you looking for third party modules to use google maps? since you are not interested in using `scripts` based solution. Then give https://angular-maps.com/ a shot — Karthick Manoharan, Oct 07 '19 at 06:50
@Dhananjaipai If you take a look at my original question (first link) then you will see that I'm trying to get rid of my `setTimeout()`. I thought the `setTimeout()` is not the right way to solve this. And that made me write the post in the first place. But I'm not really sure if it's a bad solution or not. — Constantin Beer, Oct 07 '19 at 06:51
@KarthickManoharan I'm already using `agm`. Take a look at my first link. — Constantin Beer, Oct 07 '19 at 06:52

score 1 · Accepted Answer · answered Oct 07 '19 at 08:00

A solution to the problem can be found here.

After installing @types/ggoglemaps like this:

npm install --save @types/googlemaps

the MapsAPILoader must be passed through the constructor and the load() method of it has to be used in ngOnInit() instead setTimeout().

export class MyComponent implements OnInit {

    ...

    constructor(
        private readonly someServiceWithContent: SomeServiceWithContent
        private mapsApiLoader: MapsAPILoader) {
    }

    ngOnInit() {
        this.someContentWithAddress$ = this.someServiceWithContent.someContentWithAddress$.pipe(
            tap(someContentWithAddress => {
                this.address = someContentWithAddress.address;
                this.mapsApiLoader.load().then(() => {
                this.calculateAddress(this.address);
                });
            })
        );
    }

...

}

How to solve ReferenceError: google is not defined in Angular without using scripts?

1 Answers1