Google Maps API version 3 causing images to be blurry / fuzzy

Question

For some reason on Safari 5.1.5 Google Maps is blurring some of my images. Take http://catpr.com/craig-chapman/ for example - when it loads the chandelier renders crisply for a moment, and then blurs out.

Removing

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false">   </script>

from my code stops this happening. It only seems to affect Safari - this doesn't happen in Firefox or Chrome. I haven't tested any older versions of Safari, so it may be a bug? I've also tried clearing my cache, restarting my computer + updating Safari, no change.

Any ideas?

Thanks

Answer 1

I am unable to reproduce the bug in Safari. However, two possible workarounds:

1. Load the script asynchronously. Check out the basic Getting Started page of the maps api and find the section Asynchronously Loading the API: http://goo.gl/m9OwJ

2. Try using a Google Static Maps image instead, which won't load the JavaScript just an image of the map. http://goo.gl/wY8lF. I suggest that because you appear to not be using the dynamic features of the Google Maps API.

Answer 2

This issue is now occurring for me with the difference between the 3.8 and 3.9 API on Chrome (23 beta). If I specify the 3.9 API, it shows the maps correctly for a split second and then makes everything blurry. If I specify the 3.8 API it works as it should.

You can see the problem here:

The problem is on http://melbourne.origami.org.au ; I've currently set the 3.8 API as a workaround, but when v10 is eventually released, it's going to likely force 3.9 to be the lowest available API.

From my own poking about, 3.9 and 3.10 seem to invoke Chrome (and by extension Safari I would imagine) to render everything with GL compositing as it adds -webkit-transform: translateZ(0); to all map elements. This appears to be the cause of things looking hideous.

Answer 3

I also had this problem, with the map itself and fonts on the page. After a long time trying to fix this, this are my conclusions:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.5&sensor=false"></script>

The first one (same as yours) gives me blurry maps. If I comment it out and force the version 3.5 the maps are crisply and happy!

I also had problems with Google Maps API changing anti-aliasing in my website fonts. I managed to fix this on my main style.css:

* {
    -webkit-font-smoothing: subpixel-antialiased !important;
}

I hope this helps you or someone. Note: I'm using the twitter bootstrap framework.