Google Static map without api key gives 403(forbidden) error - javascript

I am creating pdf document using jspdf.
In the document i have to display google map, so i used static google maps https://developers.google.com/maps/documentation/static-maps/intro.
This works fine on localhost.
But on deploying the app it gives error 403(forbidden)
i also added parameter sensor=false in static map url.
Request URL : https://maps.googleapis.com/maps/api/staticmap?center=47.3857009,9.2798472&zoom=15&scale=2&format=png&size=600x400&maptype=roadMap&sensor=false&markers=size:mid%7Ccolor:0xff0000%7C47.3857009,9.2798472
Thanks.

Because you MUST include API key in your request as a parameter. Without it you don't have an access to the Google Maps API thus 403 error code which clearly states: access is forbidden. You even provided a documentation which shows an example of the request:
https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284
&key=YOUR_API_KEY
The last key parameter is required to make it working.

Related

Using Google Sheet's v4 JSON Endpoint with my API but still getting "Unauthorized" message

I am trying to get a simple JSON package from putting the URL of my Google spreadsheet so I can use it on my webpage; I am using my Google Cloud Console API as it is said on the documentation of the v4 Google API format, but I still get the error of "Unauthorized API"
Documentation: https://developers.google.com/sheets/api/guides/migration#v4-api
I am using this URL:
https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID/values/Sheet1?key=API_KEY
My google sheet is set as published on the web. And also I am the creator of the google sheet.
What could I be missing? I am new to API's!
First Edit:
Answering the comment of ABDULLOKH MUKHAMMADJONOV
Here is the code I am using to make a GET request to the google sheet, you can see the Sheet ID is there, and also the API of the google cloud platform.
fetch("https://sheets.googleapis.com/v4/spreadsheets/1S652uS2FLVoZ1m3apb6R4H783v6GkV58HbQ6Idec5aY/values/Sheet1?key=AIzaSyCpFZ7mcqMNc6Q_bP6h1kCEfAi6c_fd8AM", {"method": "get"})
.then( (httpResponse) => {
if (httpResponse.ok) {
console.log(httpResponse.json());
return httpResponse.json();
} else {
return Promise.reject("Fetch did not succeed");
}
} )
.then(json => console.log(json.someKey))
.catch(err => console.log(err));
This code is from the Wix code editor.
The caller doesnt not have permissions
Means that the user you are authenticated as does not have permission to do what it is you are trying to do.
The method
https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID/values/Sheet1?key=API_KEY
I believe is this method spreadsheets.values/get if you check the documentation you will notice that it requires authorization with one of these scopes
You appear to only be sending an api key. You need to be authorized to access that sheet. You cant access it with an API key that only grants access to public data.
Ok, so I investigated about the OAuth 2.0 authentication and authorization for using Google Sheet's REST API. I added one of the needed scopes.
But I am stuck at the point on how to do the authorization process...
I am looking at this google documentation - How to use Google OAuth 2.0 authorization
But I haven't been able to get to the answer I seek. I am stuck at the part where it says "When your application needs access to user data, it asks Google for a particular scope of access." I do now know how to code this request or to do this request through the Insomnia software.
I am trying to do the GET request with a wix testing website, and also with Insomnia, but I haven't been able to achieve it.
These are the images from Insomnia, which tell me "Invalid authorization URL"
Insomnia's OAuth 2.0 authentication parameters
Insomnia's API Query parameter

Vue.js Google Places Autocomplete Error net::ERR_CONNECTION_REFUSED - API V3

My Vue.js front end is using <gmap-autcomplete> from https://github.com/xkjyeah/vue-google-maps package. When it loads the module it usually shows the error below. I assumed it is associated to the following tag '<gmap-autocomplete>'. I realized all of google api related functionality stop working.
The following error message:
GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttps%3A%2F%2Fweburl.com%2F&4s<API_KEY>&callback=xdc._lrtnqd&key=<API_KEY>&token=116130 net::ERR_CONNECTION_REFUSED. common.js:20
It usually happens when the page is loaded. There were also instances where throw an Idle Timeout error. This usually happens when the vue.js page has successfully loaded but is stops midway of receiving a response for google api.
The API Key is under a valid billing account.

Plugin map my post (wordpress) doesn't work: MissingKeyMapError

I am new to the forum and I have a problem with the Wordpress extension Map My Posts.
The widget does not display the Google map but the message "Oops! Something went wrong. This page Did not load Google Maps Correctly. See the JavaScript console for technical details. " as you can see on my site http://blog-voyages-claude.fr/
With or without API key in the setting of the extension, I receive the following error message in the JavaScript console:
v js = 3 & sensor = false: 32 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/docu ... -map-error
It may have something to do with this:
HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfil it.
GET - http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAhOBYIRBg10X2tadL5si38t6TN4tXBKNw&size=300x250&markers=color%3Apurple%7C39.4%2C-8.2&sensor=false
Further inspection of that 403 response shows this:
The Google Maps API server rejected your request.
This API project is not authorized to use this API.
Please ensure that this API is activated in the APIs Console: https://console.developers.google.com/apis/library?project=_
Please ensure this API is activated in the Google Developers Console: https://console.developers.google.com/apis/api/static_maps_backend?project=_
Proceed as instructed and this should fix the problem.

How to use Google translate text to speech API using $http in Angular?

I'm trying to leverage Google TTS API in association with Angular. However I keep coping 404 error. For example, here's a piece of my code:
term.wordVoiceUrl = 'http://www.translate.google.com/translate_tts?tl=fi&q=paiva';
term.wordAudio=new Audio(term.wordVoiceUrl);
term.wordAudio.play();
I don't understand why when I enter the link with the browser it works fine but when I request it in my code it returns a 404 error?

Query for buffering recieved Error: Error Code 0? (ArcGis Server Link for Google Maps)

I've been trying to add a buffer function into an ongoing project that uses the arcgis server link for google maps here.
I am able to draw the buffer out on the map, however, when I try to implement the query for the buffer (With proxy.ashx) and all, the proxy loads okay according to firebug, but they returns an error, "Error: Error Code 0" and nothing else. I am kinda stuck now because of this.
I am not sure if I did the proxy config file wrong or is it the codes. I am currently using the layer's query from the link above as an reference on how to query via a buffer, by indicating a spatial filter which is the buffer itself.
Here are the codes:
var layer = overlayObjects['ls'].getMapService().getLayer(0);
var params = {
geometry: buffers,
geometryType: "esriGeometryPolygon",
where:" ",
spatialRelationship: "CONTAINS",
returnGeometry: true
};
layer.query(params, function(resultSet){...}
The error occurs at the layer.query() method.
My proxy config file:
<ProxyConfig mustMatch="true">
<serverUrls>
<!-- serverUrl options:
url = location of the ArcGIS Server, either specific URL or stem
matchAll = true to forward any request beginning with the url
token = (optional) token to include for secured service
dynamicToken = if true, gets token dynamically with username and
password stored in web.config file's appSettings section.
-->
<serverUrl url="http://*mapserverlink*/ArcGIS/rest/services/"
matchAll="true"></serverUrl>
</serverUrls>
</ProxyConfig>
Due to some security reasons, I am not sure if I should place the server url here. Regardless, the serverUrl is not secured, so I do not think a token is necessary.
Also.. Is it because the buffers object I used not an overlayView object? As stated in the queryOptions class reference. My buffering is mostly the same as the one in the examples in the link above. I have tested using the Geometry I got from the buffer and place it into the mapserver's query service, and received an array of records back, but not for the javascript.
Any help with this would be appreciated..
Sorry about placing google maps api v3 in, as I thought it is included on the api reference I am looking at. I've managed to figure out what's wrong with the error code 0. I've read through the arcgislink.js that is in the project and saw that the code 0 comes from a status code from the XMLHTTPRequest. After some configurations with the server, its working now..

Categories