Erik Verboom Erik Verboom - 4 months ago 145
Javascript Question

Google maps api fails to load map tiles

I have google maps api v3 embedded into my website and it all worked fine up until a couple of weeks back. Within the last weeks, every now and then the map tiles (only the map, satellite tiles work fine all the time) fail to load for a couple of hours, sometimes days. Along with that i get the following two 403 error messages:

[Error] Failed to load resource: the server responded with a status of 403
(Forbidden) (ViewportInfoService.GetViewportInfo, line 0)
http://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo

[Error] Failed to load resource: the server responded with a status of 403
(Forbidden) (AuthenticationService.Authenticate, line 0)
http://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate


It seems like something with the authentication goes wrong. However, i am nowhere near the maximum number of calls to the api per day. Moreover, the map controls as well as the satellite tiles (when i switch over to them) load without problems.

The issue occurs randomly a few times a week for a couple of ours, up to an entire day. Most of the time everything works fine.

Has anybody experienced such issues before or any idea on what could be going wrong?

Update feb 2016: still dealing with the same problem

Upon closer examination, it appears that every time after updating the website the map tiles work for a couple of days, before the 403 messages appear again.

Usage statistics in the google developper console show that I barely ever exceed 100 requests per day, so usage limits should not be a problem at all.

By now I did request a new API key to see if that would help. After I changed the key, like after a site update for a couple of days everything was working fine, however by now we are back at the same old situation

Answer Source

So, finally this seems to be solved. It turns out that the problem was that I handled the included google maps javascript file with symfony's assetic. This caused the file to be cached on my webserver, and served to my users from there, which in turn triggered google's security measures to prevent tile scraping, causing the 403 responses.

The solution was very simpel, to use simple <script src=".."></script> tags instead of assetic's and twig's {% javascripts '..' %} tag.

Why this only caused problems with the map, and not with the satellite images, i have no idea!