Google map with too much polygons crashes iOS

Question

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: http://silktool.com/maptest.php

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

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.

I load every polygon with the following Javasctipt:

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
});

I want to make the code not crash on iOS and was wondering how to do that?

I've thought of several options, but I don't know if they would work:

• make the code more efficient/compact
• 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)
• put the coordinates in a Javascript array (they are now in a PHP array and the javascript is generated with this).
• more options?

I don't know which option to choose, any ideas?

Answer 1

You can also try to use google.maps.KmlLayer.

Have you considered using Google Maps API v3's new KmlLayer? Essentially what happens here is Google acts as a proxy for grabbing any publicly available KML layer, and automatically breaks it up into tiles. This tiled layer can also respond to click events very similar to how a vector layer would. (link)

Please, refer to similiar thread on https://gis.stackexchange.com/.