Google static map API getting 403 forbidden when loading from img tag

Question

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 Ma

Answer 1

Be hundred percent sure of these points: (for static maps)

1. Enable your project at this url :

https://console.developers.google.com/apis/api/static_maps_backend/overview?project=

2. You have your localhost, staging and production - all urls with wildcards enabled in the referrer section.

3. 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.

Answer 2

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.

Answer 3

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 :(

Answer 4

I am using Wordpress 4.9.4 with ChurchThemes Exodus Theme. I had applied for & generated a New API_KEY.

• I confirmed it was being used when calling the map: Google Map Link
• However the Js Console showed the following error: Google Maps Error in Js Console
• As Johnny White mentioned above I had to navigate to the API Library Screen via APIs & Services Menu: enter image description here
• You will be greeted by the API Library screen: API Library Screen
• Click on Maps(17) Lower LHS.
• Search for & click Google Static Maps API - Enable it if needed: Google Static Maps API
• You may also need to enable Google Maps Javascript API (same process as for Static Maps: Google Maps Javascript API

Once that is done your maps should start appearing on your site or app.

If they don't appear on refresh you may need to:

• clear your cache (Wordpress or Drupal webistes),
• wait the 5 min recommended for the API to Register the enabled API's

Answer 5

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.

1. Visit the Developer Console.
2. Under API Keys, click the pencil icon to edit.
3. Under "Key restrictions", ensure that you have an entry for example.com/*, *.example.com/*, and any local testing domains you might want.