'map.setCenter causes map to flicker. How to avoid

We are displaying areas in google map. The link http://173.248.174.144/~bethelipa/view-plotted-areas.php

We are displaying polygons using the the function 'displaypolygons'. The full function is at the end. Here we are using below code to set center once the polygon is displayed. This causes the map to flicker.

map.setCenter(new google.maps.LatLng(bounds.getCenter()), 4); 

How can we avoid this. Thanks

Full function

function displaypolygons(ai) {
        var sel_latlon= document.getElementById("latlon_"+ai).value;
        document.getElementById("coords").value = sel_latlon;
        var sel_latlon = sel_latlon.replaceAll("(", "");
        var latlon = sel_latlon.split("),");
        var mid = parseInt(latlon.length/2); var cent = latlon[mid].split(","); 
        var peditable = false; 

        var cbchecked = $('#cb_' + ai).is(":checked")
        if (!cbchecked) return togglePolygon(ai);
        
        //if (ai==3) peditable = true;
        
        const triangleCoords = []; //var idx =0;
        for(var i=0; i<latlon.length; i++){ 
          var arr = latlon[i].split(",");
          triangleCoords.push(new google.maps.LatLng({lat: parseFloat(arr[0]), lng: parseFloat(arr[1])}, true));
        } 
     
        bounds = new google.maps.LatLngBounds();
        for (i = 0; i < triangleCoords.length; i++) {
        bounds.extend(triangleCoords[i]);
        }
        
        // Construct the polygon.
        bermudaTriangle = new google.maps.Polygon({
          _uniqueId: ai,    
          paths: triangleCoords,
          strokeWeight: 2,
          fillOpacity: 0.45,
          fillColor: '#ffffff',
          strokeColor: '#ffffff',
          editable:peditable,
          draggable:false
        });
        bermudaTriangle.setMap(map);
        gpolygons.push(bermudaTriangle);
        
        map.setCenter(new google.maps.LatLng(bounds.getCenter()), 4);
        var area_lbl= document.getElementById("area_"+ai).value;

        var mapLabel = new MapLabel({
            text: area_lbl+" (Id: "+ai+" )",
            position: new google.maps.LatLng(bounds.getCenter()),
            map: map,
            fontSize: 14,
            align: 'center'
        });
        labelObjects.push(mapLabel);
        
        google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at',   edgePoints);
        google.maps.event.addListener(bermudaTriangle.getPath(), 'insert_at', edgePoints);
        google.maps.event.addListener(bermudaTriangle.getPath(), 'remove_at', edgePoints);
     

  google.maps.event.addListener(map, 'click', clearSelection);   
  google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source