42

We are developing an Hybrid app and we are using google map API in our application. When we are trying to load 2000 data markers in the map, it got crashed. Map is not get crashed in IOS6, IOS5. It is happening only in IOS7. Is there any memory related change done for ios7 application.

Kara
  • 6,115
  • 16
  • 50
  • 57
user2771801
  • 421
  • 1
  • 4
  • 4
  • Having the same problem here. The crash also occurs in Chrome (iOS7). I am using 'markerwithlabel.js' https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries and wondering if that might be part of the problem. – adamwjohnson5 Sep 19 '13 at 00:53
  • 1
    yeah. i use the infobox plugin to show labels on markers and this is why it crashes on iOS7. the infobox plugin will surely use the same api for doing that. – Philipp Kühn Sep 26 '13 at 17:42
  • Housing searches with Google Maps enabled on the Craigslist mobile site crashes Safari in iOS7. – Stephen Sep 21 '13 at 23:56
  • 1
    I think it is related to a problem I am experiencing. My web app crashes because memory used by images is not properly released. See http://stackoverflow.com/questions/19150961/ios7-webkit-crashes-frequently-not-freeing-up-memory – Mark Nov 06 '13 at 09:01
  • We have the same problem - amazing the difference between iOS 6 and 7. We have done many of the suggestions below, but still feel the app is always pushing that much lower limit. Any suggestions are greatly appreciated. – Daniel Williams Jan 04 '14 at 15:31

11 Answers11

13

As said previously iOS7 is more strict with memory usage. This behavior occurs in other browsers like Chrome, so when an app reach upper limit in memory usage, the crash appears.

I have isolated two test cases using only Gmaps javascript API and jQuery:

Testing with 100 markers: Everything it's ok

http://jsfiddle.net/edfFq/6/embedded/result

Testing with 3000 markers: Crash occurs

http://jsfiddle.net/edfFq/7/embedded/result/

$(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(40.747688, -74.004142);


    var options = {
        zoom: 2,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);


    for (var i=0;i<2800;i++){        
      var position = new google.maps.LatLng(40*Math.random(),-74*Math.random());
      var marker = new google.maps.Marker({
            position: position,
            map: map           
        });
    }
});

You can get the crash with a less number of markers if your map uses: labels, custom icons and clusters.

nachoorme
  • 534
  • 6
  • 7
8

Having experienced similar problems with Google Maps I tried to isolate a minimal test case. I wanted to see if this was perhaps a more general memory management issue.

This code that just stores random data in an array crashes Safari on IOS 7 on an iPad mini, 16GB:

function randomString(length, chars) {
    var result = '';
    for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
    return result;
}

var arr = []
for (var i=0;i<5000;i++) {
    // one character is two bytes in JavaScript, so 512 chars is 1Kb:
    o = randomString(512, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
    arr.push(o);
}

You can try this test with your own browser by going http://vici.org/memtest.html . The script on that page will try to claim 50Mb of memory, in steps of 1Mb. The script shows a running counter so you will see how well your browser performs and when it crashes (if it does). The script stores the results for each ip / user agent combination in a database to be able to draw some conclusions.

On average, IOS 6 (n=12) allows a script to claim about 12Mb. IOS 7 (n=47) allows a script to claim around 15 Mb. These are not hard limits. For both sets the standard devation was quite high, ~12 Mb. In the Xcode emulator Safari doesn't even crash at all (claiming the full 50Mb, probably because it has access to more RAM).

So we may conclude that the issue is not caused by IOS 7 leaving less memory for Safari. The problem seems to be, as was suggested by Philipp Kühn, that -in some specific cases? - Safari consumes significantly more memory than it did in IOS 6. One clue about the cause can be found at https://discussions.apple.com/message/23837361#23837361 where a page with 200 divs and the following CSS

div {
  -webkit-backface-visibility: hidden;
}

crashes safari.

It appears that using the Leaflet library circumvents the maps issue (see https://code.google.com/p/gmaps-api-issues/issues/detail?id= and https://github.com/Leaflet/Leaflet/pull/2149) however Leaflet circumvented the low memory crashes not by changes on the css but on the javascript level. Leaflet now circumvents statements like

context = this

This would suggest Safari doesn't clean up unused objects. As long as Apple doesn't fix Safari, perhaps Google could do changes similar to what the Leaflet guys have done?

In the mean time Apple has release IOS7.1 which doesn't fully solve the crashes but certainly makes them occur les often.

Tuxzone
  • 44
  • 4
8

We have a webapplication, that chrashes too with many markers on iOS7. So we took a closer look at the memory the iPad use.

iPad mini (and iPad3) with iOS7:

The memory usage is getting higher and higher and between 300-400MB the browser chrashes.

iPad 3 with iOS6

The memory usage is about 200MB and everything is fine.

iPad 1 with iOS5

The memory usage is only about 100MB and everything is fine.

Conclusion

So this is NOT just a memory limit – it's definitely a huge bug on the iOS safari! And until now (iOS 7.0.3) this is not fixed.

Philipp Kühn
  • 1,579
  • 2
  • 16
  • 25
  • Is there a reason that a mobile website would crash in IOS 7.0.3 for iPad but NOT for iPhone? I was able to get the mobile website on iPhone to work by preventing additional markers from loading, but that same strategy doesn't work for the iPad. Is it device-dependent (like, too many apps open), or does iPad have more restrictions than iPhone? – KDP Oct 28 '13 at 15:51
  • Today iOS 7.0.4 was released. Can you check if the problem still exists? – Mark Nov 15 '13 at 17:05
  • 1
    The problem still exists :/ – Philipp Kühn Nov 16 '13 at 13:35
4

Good news! we switched over our apps framework from google to leaflet and it works beautifully, no crashing, we checked the debug and it runs extremely high memory but never crashes. If you have not already go with Leaflet, it fully works on iOS 7,

Jason G
  • 309
  • 3
  • 14
3

Our application behaved in the same as the users above; everything worked well prior to iOS 7, yet crashed afterwards. The problem indeed does appear to be a memory issue. You can verify by checking the crash report logs on your device.

As our application was essential to a client, we couldn't sit and wait for a fix from Apple. In our case, the fix involved three specific strategies:

  1. Javascript code optimization. Our application was developed very quickly and turned from a prototype into a working system without extensive code planning. In our system, we were able to realize significant memory gains by optimizing the code. This meant deleting unused variables; take a look if you happen to store all the markers into a preliminary array as a response from your database. Delete these old arrays and unused variables once everything is loaded successfully. In addition, consider limiting included libraries, and employ common Javascript / jQuery best optimization practices.

  2. Empty info windows. The next memory-saving strategy came from NOT pre-loading each marker's info window screen with data. We stripped each info window bare, except for an empty div with unique ID, which would then be loaded asynchronously on click through Ajax. The savings from many thousands of markers, when you take all of that unnecessary info window data out, were fairly large. We were loading around 10,000 markers. The user experience wasn't greatly impacted either because the difference pre-loading and Ajax load times was negligible.

  3. The greatest difference, and perhaps a clue as to where the iOS 7 memory leak lies, came from simply reducing the number of markers displayed on the screen at once. Each application will be different, but we discovered that lowering the results to 500 markers or less resulted in a stable system without crashing. Our strategy was simply to load and clear the array of visible markers based on user behaviour. For example, if the user's particular filter selection resulted in more than 500 markers, we simply limited the results from the database. Visually, the result set still seems large, and is not much different, from a user experience perspective, from seeing many thousands of markers. In both situations, the user will still need to filter and narrow the results to get down to a manageable result. In our case, the user wouldn't even notice the limit.

This did the trick! Our application is now crash free. Considering the amount of time (not to mention frustration!) this issue caused me, hopefully these strategies will give you a jumping off point to get your application back up and working. Feel free to get in touch if you wanted something a little more specific. Good luck!

Andrew
  • 497
  • 1
  • 6
  • 18
0

I believe IOS7 has a memory cap of 5Mb (longer battery life), it used to be 50Mb or something like that. Since the cap is limited with OS, so it does not matter if you are using Chrome, Safari or other browsers, it will crash if exceeded.

i tested my receiving data limit to 20 from SQL, and it works on all browsers on my iphone (pad).

0

I had the same problem and tried out a few things. I disabled the animation when markers are set (I had about 30 being added at once) and it seems like it doesn't crash any more now. Hope that helps.

  • hmm, i have between 500 and 2000 markers being added all at once and a lot of calculations happens there as well. Safari does not crash on that (though it's a bit slow) but it crashes when i zoom in and out very fast – ProblemsOfSumit Mar 09 '14 at 09:00
0

We have the same issue with Labels on google map. When map zoom in app get crashed. This started to happen after upgrade in to IOS 7. I am trying different options like remove and add label in events like "drag" and "idle". This code works but still crash occur. but less often. I hope someone might have better fix for this.

    google.maps.event.addListener(Map.gmap, 'drag', function () {
            $('.arrowSite_box').remove(); // remove labels
    });

    google.maps.event.addListener(Map.gmap, 'idle', function () {
        loadMarkers(results); // add labels
    });
0

If you are dealing with a large number of markers, try using the MarkerClusterer. It will lower the number of concurrent markers significantly, and in our case it prevented the crash.

0

Heyy... I was also facing the similar problem. So, I tried this:

I cleared the application caches in "didReceiveMemoryWarning" method of my view controller and custom plugins and set the properties and variables to NIL in "onMemoryWarning" method of CDVPlugin class. And this approach did the work for me. I am not getting any crash as of now. Hope this helps.

anshul
  • 846
  • 1
  • 14
  • 32
0

Seems to be fixed in iOS 7.1

Yesterday on iOS 7.0.6, my map would crash Mobile Safari with more than 3,000 markers. Today after upgrading my iPad, I can load a map in Mobile Safari with over 15,000 markers.

Skye
  • 83
  • 1
  • 4