Angular 5 - google is not defined (Google Maps)

Question

I want to use google maps on my Angular 5 app, but I encourtered some problem.

When view is loading I receive error in js console:

LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined 
at LoginComponent.ngAfterViewInit (login.component.ts:15) 
at callProviderLifecycles (core.js:12428)..

My component:

  import {AfterViewInit, Component} from '@angular/core';
    declare let google: any;

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements AfterViewInit {

       ngAfterViewInit(): void {
          let origin = new google.maps.LatLng(4.0, 2.0 );
          let destination = new google.maps.LatLng(1.0, 1.5);
       }

       constructor() {}
    }

app.module.ts

import {AgmCoreModule} from '@agm/core';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

I'm using AgmCoreModule installed by npm:

npm install @agm/core --save

I tried also importing LatLang class this way:

import LatLng = google.maps.LatLng;

And use script in my index.html

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

But all the time I received same issues. Am I missing something?

remove async and defer and then try if it works then its probably your maps are not loading even after view is ready. — fastAsTortoise
– fastAsTortoise, Commented Nov 29, 2017 at 21:45

LLai · Accepted Answer · 2017-11-29 22:06:01Z

5

agm/core loads google maps & sets your api key within the module import, so you do not need <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

Follow their getting started tutorial. You'll end up with something like

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

answered Nov 29, 2017 at 22:06

LLai

13.5k3 gold badges44 silver badges46 bronze badges

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

Comments

DGarvanski · Accepted Answer · 2018-01-31 15:52:27Z

1

Get key from google maps and then place that key in app.module.ts under @NgModule

AgmCoreModule.forRoot({
   apiKey: 'your key generated from google maps'
});

and in HTML add this

<agm-map [latitude]="lat" [longitude]="lng">
   <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

and also this in the CSS

agm-map {
  height: 300px;
}

edited Jan 31, 2018 at 15:52

DGarvanski

2,6033 gold badges29 silver badges35 bronze badges

answered Jan 31, 2018 at 14:50

Saleem Mustafa

112 bronze badges

Comments

Garik Kalashyan · Accepted Answer · 2018-09-27 09:08:13Z

You need just add corresponding dependencies and types to your project. So these are.

in tsconfig.json -> "types":[... "googlemaps"]

in package.json -> "dependencies":[... "googlemaps": "^1.12.0"]

And don't forget about the API key which you should get from https://developers.google.com/places/web-service/get-api-key, after having it you set it to the module via AgmCoreModule or just adding import script into HTML, I am using GMap component of PrimeNG and all these steps helped me go forward.

Collectives™ on Stack Overflow

Angular 5 - google is not defined (Google Maps)

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related