Search code examples
javascriptgoogle-mapsgoogle-maps-api-3ramcpu-speed

As polygon on map increases maximum ram utilizes and slow down CPU causing browser crash


I am unable to find the exact solution for a browser crash in rendering multiple polygons on map in my application when using up to 500 polygons and have 14000 lat/long associated. It loads fine for up to 300 polygons, then after that the browser crashes due to ram utilization increasing and CPU performance dropping.

Is there any solution for this so that RAM and CPU utilization be less, so you can run the application without crashing the browser?

function init(mydata){

    var mypolygons  = [];
    var bounds      = new google.maps.LatLngBounds();
    for (i = 0; i < mydata.length; i++){        
        var placemark_name = mydata[i].placemark_name ; 
        var latlong = mydata[i].latlong;
        LatLng = [];
            for (j = 0; j < latlong.length; j++) {

                var lat = latlong[j].LatitudeLongitude.latitude;
                var lng = latlong[j].LatitudeLongitude.longitude;

                LatLng.push(new google.maps.LatLng(lat,lng));
                bounds.extend(LatLng[LatLng.length-1]);
                map.fitBounds(bounds);
            }

            var polygonOptions = {
                paths:LatLng,
                strokeColor: '#FF0000',
                fillColor: '#FF0000',
                draggable: false,
                editable:true,
                fillOpacity: 0.35,
                strokeOpacity: 0.8
            };  

            mypolygons.push(new google.maps.Polygon(polygonOptions));
            mypolygons[i].setMap(map);                              
    }           
}

Solution

  • I found the solution and that was to keep the property 
    "editable:true" to "editable:false" and 
    Everything worked fine.