Google Maps API crashes older iOS mobile Safari

I am calling a map via google maps v3 api on my personal website. Everything seems to be working fine – until I was told my website makes mobile devices crash…

After the initial shock and horror I started testing multiple devices but it only seems to affect older iOS versions. It’s running fine on iPhone 4 & 5 with latest iOS 6. It crashes my iPAD 1 on iOS 5.1 and have seen it also crash iPhone 4S (unknown iOS); Android phones I have tested with seemed to work fine … So if my observations are correct it seems to be a version rather than performance issue.

Read More

The only other reference on a problem like this I found here: http://blog.rotacoo.com/lazy-loading-instances-of-the-google-maps-api … although there the problem seems to be a multitude of API calls. I only execute one…

So far I tried calling v3.8 / v3.9 / 3.10 of Google Maps API, reset the map I load to the basic settings etc, asynch loading… but the problem seems to be consistent…

Currently I am loading API in the header like this:

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

I did try to load it via enqueue script in the functions.php, but it seems the & create a lot of problems…

I am running latest WordPress and you can see the site at: www.deborre.net

Would very much appreciate any help! Thanks.

Related posts

Leave a Reply

2 comments

  1. I know this is late, but I was having the same problem and I got rid of the marker animation. I was trying to use a custom marker with the DROP animation, which works well on desktop but consistently crashed my iPad 2. Not sure if this is the solution to the problem stated here, but it might save someone some headbanging in the future.

    Also, I am using Modernizr, so my final code looks like this (tested on iPad2 and iPhone5 – both iOS6):

    new google.maps.Marker({
        position: new google.maps.LatLng($this.attr('data-lat'), $this.attr('data-lon')),
        map: map,
        animation: Modernizr.touch ? '' : google.maps.Animation.DROP,
        icon: icon,
        shadow: shadow
    });
    
  2. My best guess is that this is a total amount of memory issue on these devices. iPhones running iOS < 4 are almost all very old devices. It’s unfortunate though that this affects the original iPad on iOS 5.

    WordPress sites tend to not be optimized well. Simply look at the sheer number of <script> tags and stylesheets on your page.

    While this isn’t the best of answers, try to reduce the number external scripts and stylesheets on your page and see if that makes a difference. Having built WordPress themes, this of course is not particularly easy to do.