Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

http://lpoc.co.uk/properties-for-sale/property/oldgate-dairy-st-james-road-long-sutton-cambridgeshire-pe12/?prop-print=1

^^ 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

like image 375
Scott Avatar asked Mar 01 '11 12:03

Scott


People also ask

How do I enable static API maps?

Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.

Why this page can't load Google Maps correctly?

Unless a valid API key is present, the map will be displayed in a lower resolution and will have a watermark on it. If the credit card linked to the account is invalid or the number of free map views is surpassed, the "This Page Can't Load Google Maps Correctly" error will show up.

Is Google static map API free?

The Maps Static API uses a pay-as-you-go pricing model. Requests for the Maps Static API are billed under the SKU for Static Maps. Along with the overall Google Terms of Use, there are usage limits specific to the Maps Static API. Manage your costs and usage with tools available in the Google Cloud Console.


3 Answers

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.
like image 118
jcfrei Avatar answered Oct 15 '22 11:10

jcfrei


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.

like image 14
Frederik Wordenskjold Avatar answered Oct 15 '22 09:10

Frederik Wordenskjold


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.

like image 4
Jonny White Avatar answered Oct 15 '22 11:10

Jonny White