tulo

var map;
var drawingManager;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });

  // Define the initial read-only polygon
  var initialPolygonCoords = [
    {lat: 0, lng: 0},
    {lat: 10, lng: 0},
    {lat: 10, lng: 10},
    {lat: 0, lng: 10}
  ];

  var initialPolygon = new google.maps.Polygon({
    paths: initialPolygonCoords,
    map: map,
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#000000',
    fillOpacity: 0.35
  });

  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControlOptions: {
      drawingModes: ['polygon']
    }
  });
  drawingManager.setMap(map);

  document.getElementById('startPolygon').addEventListener('click', function() {
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

  document.getElementById('endPolygon').addEventListener('click', function() {
    drawingManager.setDrawingMode(null);
  });
}