How to fix this 'Google Maps JavaScript API error: InvalidKeyMapError' error in angular 6?

Question

I am using google maps in my Angular 6 app.

I have been using this Google map in another project too, but recently I started another project and installed angular agm. I then used the API key that I used for the previous project, but it did not work. Said that 'it is an invalid key'. So I got a new API key, but there was the same problem.

This is the problem that shows in browser.

Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key util.js:222:33
Google Maps JavaScript API error: InvalidKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error js:51:110
_.Jc
https://maps.googleapis.com/maps/api/js:51:110
on/this.l</<
https://maps.googleapis.com/maps-api-v3/api/js/35/8/common.js:73:375
_.qn</<
https://maps.googleapis.com/maps-api-v3/api/js/35/8/common.js:138:172
c
https://maps.googleapis.com/maps-api-v3/api/js/35/8/common.js:67:82
<anonymous>
https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate:1:22

map.component.html

<agm-map [latitude]="mapDetails.latitude" [longitude]="mapDetails.longitude" (mapClick)=" onChooseLocation($event)">
  <agm-marker [latitude]="mapDetails.latitude" [longitude]="mapDetails.longitude"></agm-marker>
</agm-map>

map.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { MapDetails } from '../shared/models/map-details.model';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {
  mapDetails: MapDetails = new MapDetails();
    
  @Output() public mapClickEvent = new EventEmitter();
  constructor() { }

  ngOnInit() {
    this.mapDetails.latitude=6.9271;
    this.mapDetails.longitude=79.8612;
  }
  onChooseLocation(event){
      this.mapDetails.latitude=event.coords.lat;
      this.mapDetails.longitude=event.coords.lng;
      this.mapClickEvent.emit(this.mapDetails);
      
  }
}

user-layout.module.ts

import { JobDoneComponent } from './../../job-done/job-done.component';
import { RatingComponent } from './../../rating/rating.component';
import { NotificationsComponent } from './../../notifications/notifications.component';
import { ProvidedJobsComponent } from './../../provided-jobs/provided-jobs.component';
import { CompletedJobsComponent } from './../../completed-jobs/completed-jobs.component';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserLayoutRoutes } from './user-layout.routing';


import { UserProfileComponent } from '../../user-profile/user-profile.component';

import { ChartsModule } from 'ng2-charts';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import {ComplainComponent} from '../../complain/complain.component';
import { UserLogInComponent } from 'app/user-log-in/user-log-in.component';
//import {MatButtonModule, MatCheckboxModule, MatDialog, MAT_DIALOG_DATA, MatDialogConfig} from '@angular/material';
import { MatFormFieldModule,MatCardModule,MatStepperModule,MatSelectModule,MatButtonModule, MatCheckboxModule, MatInputModule,MatDatepickerModule, MatNativeDateModule, MatToolbarModule, MatSidenavModule, MatIconModule, MatListModule} from '@angular/material';
import {MatDialogModule} from '@angular/material/dialog';

import { PostJobsComponent } from '../../post-jobs/post-jobs.component';
import { PostPaymentsComponent } from '../../post-payments/post-payments.component';
import {MapsComponent} from '../../maps/maps.component';
import { DraftPostComponent } from '../../draft-post/draft-post.component';
import { JobRequestComponent } from '../../job-request/job-request.component';
import { AgmCoreModule } from '@agm/core';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(UserLayoutRoutes),
    FormsModule,
    ChartsModule,
    NgbModule,
    ToastrModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey:'My_API_KEY'
    }),
    MatDialogModule,
    MatFormFieldModule,
    MatCardModule,
    MatStepperModule,
    MatSelectModule,
    MatButtonModule, 
    MatCheckboxModule, 
    MatInputModule, 
    MatNativeDateModule,
    MatToolbarModule, 
    MatSidenavModule, 
    MatIconModule, 
    MatListModule
  ],
  declarations: [
    PostJobsComponent,
    PostPaymentsComponent,
    DraftPostComponent,
    UserProfileComponent,
    JobRequestComponent,
    ComplainComponent,
    MapsComponent,
    CompletedJobsComponent,
    ProvidedJobsComponent,
    NotificationsComponent,
    JobDoneComponent,
    RatingComponent
  ],
  entryComponents: [RatingComponent]
})
export class UserLayoutModule { }

Constituency

plz someone answer – Constituency

Error message seems to be clear. API key that you applied in the AgmCoreModule.forRoot() is not valid. Double check your project in developer console and check if api key is correct. – Carver

no bought new API Key too. but still not working – Constituency

Answer 1

You might be loading Google Maps API twice, check if you are loading it in the provider

uiGmapGoogleMapApi.then(function(maps) {});

and also loading the script tag at the same time

<script src="https://maps.googleapis.com/maps/api/js"></script>

Try to remove the script tag and see if it works.

Mcilwain

Answer 2

Although this might not be the best approach in those environments where the key is already being used at multiple places. It worked for me as I was using it at just 2 of the places in my project.

Deleting the existing key and regenerating a new key worked for me.

Burrell

Answer 3

InvalidKeyMapError happens when your API key can't be found. So make sure you are using correct key that you generate or regenerate it.

The more details are here

Communicate