Error : ApiTargetBlockedMapError In AGM Map Using Google Map API

Question

I tried to include Google map with Multiple locations.

For One location Iframe is working fine. I don't know how to Implement Multiple locations in Iframe. So I tried With AGM. The Same APIKey Im used for AGM Also.But getting Error that Google Maps JavaScript API error: ApiTargetBlockedMapError.

Here Is my Code For IFrame

<iframe src="https://www.google.com/maps/embed/v1/place?q=11.0443324,77.04292389999999&key=MY_APIKEY" width="98%" height="100%" frameborder="0"></iframe>

For AGM Add the key in NgModule

AgmCoreModule.forRoot({AgmCoreModule.forRoot({
     apiKey: 'MY_APIKEY',
     }) 
<agm-marker *ngFor="let loc of mSupplierLocationList" [label]="loc.label" [latitude]="loc.latitude" [longitude]="loc.longitude" >
</agm-marker>
</agm-map>

Answer 1

I ran into this same error, while using a key that already had permission to use the JavaScript API. It turned out Google had changed the permissions required for a service, but not the error message; I had to give the key access to the Places API and it fixed the error.

Answer 2

Note that AGM uses JavaScript API. Not Embed API (the API you're calling without problem in your iframe).

This is likely the issue if you're using the same API key to call both APIs.

This ApiTargetBlockedMapError means:

The Maps JavaScript API has not been authorized for the used API key. Please check the API restrictions settings of your API key in the Google Cloud Platform Console.

So first make sure that the JavaScript API is enabled on you project and then check that it is listed under your API key's API restrictions.

Hope this helps!