Google maps javascript api error invalidkeymaperror

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Maps JavaScript API error: InvalidKeyMapError #1789

Google Maps JavaScript API error: InvalidKeyMapError #1789

Comments

Issue description
i add api key but it get this error

Google Maps JavaScript API error: InvalidKeyMapError 

Steps to reproduce and a minimal demo of the problem

_Use stackblitz.com or similar — try this template as a starting point: https://stackblitz.com/edit/angular-google-maps-demo

What steps should we try in your demo to see the problem?

Current behavior
getin this error

Google Maps JavaScript API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error js:59:128 xd https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE:59 h https://maps.googleapis.com/maps-api-v3/api/js/39/5/common.js:75 Ip https://maps.googleapis.com/maps-api-v3/api/js/39/5/common.js:150 c https://maps.googleapis.com/maps-api-v3/api/js/39/5/common.js:69 https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp://localhost:4200/carspa&4sYOUR-KEY-HERE&callback=_xdc_._9kp00d&key=YOUR-KEY-HERE&token=100548:1 

Expected/desired behavior

angular-google-maps, Angular, & any other relevant dependency versions

"@agm/core": "^1.1.0", "@angular/animations": "8.2.14", "@angular/cdk": "8.0.1", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/fire": "^5.2.3", "@angular/forms": "8.2.14", "@angular/http": "7.2.15", "@angular/material": "8.0.1", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/platform-server": "8.2.14", 

Other information

The text was updated successfully, but these errors were encountered:

Источник

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

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.

Related videos on Youtube

lahiru sudesh

Comments

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 

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); >> 

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 from '../../complain/complain.component'; import < UserLogInComponent >from 'app/user-log-in/user-log-in.component'; //import from '@angular/material'; import < MatFormFieldModule,MatCardModule,MatStepperModule,MatSelectModule,MatButtonModule, MatCheckboxModule, MatInputModule,MatDatepickerModule, MatNativeDateModule, MatToolbarModule, MatSidenavModule, MatIconModule, MatListModule>from '@angular/material'; import from '@angular/material/dialog'; import < PostJobsComponent >from '../../post-jobs/post-jobs.component'; import < PostPaymentsComponent >from '../../post-payments/post-payments.component'; import 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