title: Google map with too much polygons crashes iOS
body: <p>I have a Google map with 400+ polygons, these polygons consist of 40.000+ lat/lng coordinates. These are all Dutch municipalities, the result can be seen here: <a href="http://silktool.com/maptest.php" rel="nofollow">http://silktool.com/maptest.php</a></p>
  
  <p>It works fine (it is a bit slow to load at 2.5MB / 500Kb gzipped) on desktop machines, but when opening the url on an iOS device it crashed Mobile Safari (in Chrome for iOS it works).</p>
  
  <p>I suspect it is because it is just simply too much code or polygons. When I load only half of the polygons, Mobile Safari does not crash.</p>
  
  <p>I load every polygon with the following Javasctipt:</p>
  
  <pre><code>var city1 = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(53.0873209365,6.79015076682),
      …many many latlng coordinates… 
      new google.maps.LatLng(53.0716361297,6.81423099069),
      new google.maps.LatLng(53.0873209365,6.79015076682)
    ],
    strokeColor: "#fff",
    strokeOpacity: 0.5,
    strokeWeight: 1,
    fillColor: "rgb(60,255,160)",
    fillOpacity: 0.7
  });
  
  
  var city2 = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(53.0873209365,6.79015076682),
      …many many latlng coordinates… 
      new google.maps.LatLng(53.0716361297,6.81423099069),
      new google.maps.LatLng(53.0873209365,6.79015076682)
    ],
    strokeColor: "#fff",
    strokeOpacity: 0.5,
    strokeWeight: 1,
    fillColor: "rgb(60,255,160)",
    fillOpacity: 0.7
  });
  </code></pre>
  
  <p>I want to make the code not crash on iOS and was wondering how to do that?</p>
  
  <p>I've thought of several options, but I don't know if they would work:</p>
  
  <ul>
  <li>make the code more efficient/compact</li>
  <li>don't use Google maps, but for example Leaflet with a smoothing option to simplify the polygons on different zoom levels (http://leaflet.cloudmade.com/reference.html#polyline-options)</li>
  <li>put the coordinates in a Javascript array (they are now in a PHP array and the javascript is generated with this).</li>
  <li>more options?</li>
  </ul>
  
  <p>I don't know which option to choose, any ideas? </p>