As the polygon on the map grows, the maximum reel uses up and slows down the processor, causing the browser to crash

I cannot find an exact solution for browser crash when rendering multiple polygons on a map in my application when using up to 500 polygons and associated LVL 14000 / lengths. It is loaded with a fine of up to 300 polygons, after which the browser crashes due to increased plunging usage and reduced CPU performance.

Is there any solution for this to keep the RAM and CPU usage less so you can run the app without browser crashes?

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

            var polygonOptions = {
                strokeColor: '#FF0000',
                fillColor: '#FF0000',
                draggable: false,
                fillOpacity: 0.35,
                strokeOpacity: 0.8

            mypolygons.push(new google.maps.Polygon(polygonOptions));



source to share

1 answer

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




All Articles