I am using google map in my Angular 6 app.
I have been using this Google map in another project too. but recently I start another project and install angular agm. then used the API key that i used previous project. but it did not work. Said 'that it is an invalid key'. so i got new API key , but there is 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 { }
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With