'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 |
|---|
