Google static map API getting 403 forbidden when loading from img tag
Solution 1
Oops I feel like such an idiot. I was using the old V2 maps API URL and not the new V3 API URL. I was getting a 403 because I was using the V2 URL without providing an API key :(
Solution 2
This has gotten quite a lot of views, so I'm adding my solution to the problem here:
When using the new API, make sure you generate a Key for browser apps (with referers) and also make sure the patterns match your URL.
E.g. when requesting from example.com your pattern should be
example.com/*
When you're requesting from www.example.com:
*.example.com/*
So make sure you check whether a subdomain is present and allow both patterns in the developer console.
- Visit the Developer Console.
- Under API Keys, click the pencil icon to edit.
- Under "Key restrictions", ensure that you have an entry for
example.com/*
,*.example.com/*
, and any local testing domains you might want.
Solution 3
There seems to be some confusion here, and since this thread is highly ranked on Google, it seems relevant to clarify.
Google has a couple of different API's to use for their maps service:
Javascript API
The old version of this API was version 2, which required a key. This version is deprecated, and it is recommended to upgrade to the newer version 3. Note that the documentation still states that you need a key for this to function, except if you're using "Google Maps API for Business".
Static Maps API
This is a whole different story. Static maps is a service that does not require any javascript. You simply call an url, and Google will return a maps image, making it possible to insert the URL directly into your <img>
tag.
The newest version is version 2, and this requires a key to function because a usage limit is applied.
A key can be requested here: https://code.google.com/apis/console
And the key should be added to the request for the correct image to be generated:
http://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600x300&key=API_console_key
I hope this clears up some confusion.
Solution 4
I had this same problem but my solution was different. I had the V2 maps api enabled, but not the static maps api (I thought this was V2). I enabled the static maps api and it worked.
Solution 5
Be hundred percent sure of these points: (for static maps)
- Enable your project at this url :
https://console.developers.google.com/apis/api/static_maps_backend/overview?project=
You have your localhost, staging and production - all urls with wildcards enabled in the referrer section.
Google has changed its policy and you now need an api key to display maps. refer this for more : Google Maps API without key?
Hope it helps.
Related videos on Youtube
Scott
Updated on July 09, 2022Comments
-
Scott almost 2 years
What I have is a Google map that shows the location of a property but when I come to print the dynamic maps dont print so good so I decided to implement the Google Static Map image API.
^^ is an example of a property in print view and should show a static map image but it fails to load and looking at my inspector I'm getting a 403 Forbiden response for the image.
But if I go to the URL directly the image loads...
What am I doing wrong?
Thanks
Scott
-
matteo over 12 yearsBut even so, how comes that you get 403 when loading from an img tag, and it works when loading directly in the browser?? I have the same issue
-
matteo over 12 yearsAnd by the way, what V3 api url???? According to the documentation, there no such a thing as a static map api V3, the latest version for static map api is V2. I'm confused
-
Pure Function about 11 yearsI dunno if this has changed since your answer, but according to the static maps API v2 a key is not required. quoted from the site: "Note that the use of a key is not required, though it is recommended. Examples in this document do not include the key parameter so that they will work for all users who cut-and-paste the code."
-
Ryan Wheale over 10 yearsThis worked for me. In the Google APIs console I had enabled "Google Maps API" but not "Static Maps API", which is near the bottom of the list.
-
Kamil B. about 10 yearsThis is exactly what helped me! I spent whole weekend with that issue. Newest static maps api, right URL, I am sending api_key, api console told me "no problems" - and I was getting only error 403 forbidden by Google. Finally I found your advice and bingo! :) I've just added mydomain.com/* to api console and it works like a charm! Thank you :)
-
jackocnr over 9 yearsAlso remember to add localhost/* if you want it to work on localhost
-
jenlampton about 7 yearsIs it possible to edit a project in the developer console, or do you have to delete the current one and add another?
-
jenlampton about 7 yearsWhat do you mean by "the referrer section"? As best I can tell, a "project" consists of only a name - there's nothing in the UI to tie a project to a particular website.
-
jenlampton about 7 yearsUpdate: "the referrer section" is located under "Credentials", and you can only enter specific domains (with wildcards) once you add "Key restriction" via "HTTP referrers (web sites)"
-
jenlampton about 7 yearsI was eventually able to edit a project, but only from this URL: console.developers.google.com/apis/credentials/key
-
contrebis over 4 yearsI know this answer is old but future readers note that the linked doc states "This document details the Maps Static API v2". It also suggests that a key must be provided:
&key=YOUR_API_KEY
.