Search code examples
google-maps-api-3imagesourcesafari

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

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

Solution

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