Issue: Unable to access API target map in AGM using Google Map API

I attempted to integrate a Google map with multiple locations.

While I was successful in using an Iframe for one location, I struggled to implement multiple locations within the Iframe. As a result, I tried utilizing AGM and used the same APIKey that I had used for the Iframe. However, I encountered an error stating Google Maps JavaScript API error: ApiTargetBlockedMapError.

Here is my code snippet for the 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>

To use AGM, add the key in NgModule:

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>
javascriptgoogle-mapsgoogle-maps-api-3angular8angular-google-maps

Answer №1

Please note that AGM utilizes the JavaScript API, not the Embed API (which is what you are currently calling in your iframe without issue).

If you are using the same API key to call both APIs, this could be the source of the problem.

The ApiTargetBlockedMapError indicates:

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

Ensure that the JavaScript API is enabled in your project and confirm that it is included under the API restrictions for your API key.

We hope this information proves helpful!

Answer №2

Encountering the identical issue, I discovered that even though my key had been granted permission to utilize the JavaScript API, Google had altered the necessary permissions for a service without updating the error message. I needed to grant access to the Places API using the key in order to resolve the issue.

Answer №3

If anyone is facing a similar issue, I encountered the same problem.

  • Navigating to the credentials section on Google Cloud Platform
  • Then selecting Maps > you will find a dropdown menu for API Restrictions

Although all Maps [...] API were enabled, I realized that some Maps APIs do not include "Maps" in their names, so I had to manually add them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

javascriptjquerycss

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

Tips for effectively managing 404 errors in Angular 10 with modular routing

I'm facing challenges with handling 404 pages within an Angular 10 application that utilizes modular routing architecture. Here is the structure of my code: |> app |-- app.module.ts |-- app-routing.module.ts |-- app.component{ts, spec.ts, scss, ht ...

javascriptangulartypescriptangular-router

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: Upon inspecting in Chrome developer tools, I noticed that the element still exists but lacks heigh ...

javascripthtmljquerycss

JavaScript for Detecting Hits

I have recently ventured into coding as a beginner, and I have already created a calculator using Javascript, HTML, and CSS. Currently, I am working on developing a platformer game using JavaScript and HTML. I have set up the player, obstacles, canvas, fra ...

javascripthtmldebuggingcanvas

Updating the content of a div when the mouse hovers over it

Looking for some help here - I have a few divs with paragraphs of text inside. My goal is to change the text in each div when it's being hovered over. I know this can be done using JavaScript (jquery perhaps?), but my coding skills are pretty basic. A ...

javascriptjqueryhoverjquery-hovermousehover

Utilizing AJAX to dynamically create graphs using Highcharts

I'm having trouble integrating AJAX with highcharts in my project. Here is a snippet of my HTML and javascript code: function test () { var options = { chart : { renderTo : 'container', type : 'spline', ...

javascriptphpajaxhighcharts

Comparing npm install --save versus npm install --save-dev

Hey everyone, I've been using npm install -g to globally install node modules/packages, but I'm a bit confused about the --save and --save-dev options. I tried looking it up on Google, but I'm still not entirely sure. Can you guys help clar ...

javascriptnpm

Interact with USB drive using electron to both read and write data

I am currently developing an electron project that involves copying files from a computer to USB drives. I need the ability to transfer files and folders to the destination USB drive, as well as determine the amount of free space on the drive. I have expe ...

javascriptnode.jsnpmelectron

How to retrieve the outcome of a stored procedure using node.js

Is it possible to retrieve multiple select results from distinct tables (many rows) in just one stored procedure in mysql and then access those results in nodejs? In .NET with SQL Server, we can use "sqlnextresult" for this purpose. VIEW IMAGE FROM STORE ...

javascriptmysqlnode.js

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

I have developed a unique plugin that offers multiple Grails controllers and domain objects. Additionally, I have created several AngularJS UI components that I wish to utilize in various other projects. These specific files are located within the web-app ...

javascriptangularjsgrailsgspgrails-resources-plugin

Difficulty dealing with Firestore using get() followed by add()

Recently started learning Vue.js and Firestore, facing a challenge with what should be a simple task. 1) I am trying to fetch default values from an existing template document in my Firestore database. 2) The goal is to use these default values to create ...

javascriptvue.jsgoogle-cloud-platformgoogle-cloud-firestore

Is it possible to assign a different array to a variable in JavaScript?

I'm facing an issue with manipulating arrays in JavaScript within a function. This problem arises from an exercise found in the book Eloquent JavaScript, focusing on two specific functions: reverseArray(): designed to produce a new array that is the ...

javascriptarrayspass-by-value

Manipulate JQuery plug-in properties within an AJAX request using MVC

Currently, I am utilizing a Jquery time picker sourced from Within the view, there exists this time picker control. $("#startTime").timePicker({ startTime: "09.00", endTime: new Date(0, 0, 0, 19, 0, 0), show24Hours: false, ...

javascriptjqueryasp.netajaxasp.net-mvc

Is there a way to enable scanned data to be automatically inputted into a field without manual entry?

I am in the process of creating a user-friendly Android app for virtual inventory management. I want the application to streamline data input by automatically populating text fields upon scanning, eliminating the need for users to manually click on each fi ...

javascriptandroidjqueryfocusscanning

Tips for successfully sending an array via an XMLHttp Get request

I am currently working on a project where I need to utilize all the values from an array in my GET request. The code snippet below outlines my approach: function executeRequest(){ let data = ['value1', 'value2', 'value3'] ...

javascriptapigetxmlhttprequest

How to send configuration data to an external library in Angular 6 in the app.module.ts file

My goal is to provide basic configuration settings to an external or third-party module. These settings are stored in a JSON file for easy modification across different environments without the need to rebuild the code. import { BrowserModule } from &apos ...

javascriptangularangular6

Using the JavaScript selectionchange event to target a specific element exclusively

I am looking for a way to incorporate a JavaScript selectionchange event on a specific div element. The goal is to display a highlighter box when the user selects text from the DOM. I was able to achieve this functionality for web using an onmouseup event, ...

javascriptjquery

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

A unique data structure is set up in the following way: const library = [ { procedureName:'Build Foundations', id:1, tasks:[ { taskName:'dig at least 1m deep', isCompleted:false, procedureId:1 }, ...

javascriptreactjsecmascript-6

Is there a way to hide a paragraph or div using javascript?

I am experimenting with using buttons to hide paragraphs using javascript, but even when I set them as "hidden", there is still excess blank space left behind. Is there a way I can eliminate that extra space? Below is the javascript code: function backgro ...

javascripthtml