How to draw google.maps.Polygon as beautifully as ymaps.Polygon?

Question

JavaScript

Hello.
Yandex api allows you to beautifully build areas, for example webmap-blog.ru/examples/ymap-api-v2/mnogougolnik/e...
For Google, I found an example web3o.blogspot.ru/2010/05/google-maps-dynamically-.. . , but somehow there are too many "dances with a tambourine" there.
Another easier option

var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: false,
polygonOptions :{
                    fillColor: '#ff8888',
                    strokeColor: '#666666',
                    strokeWidth: 2,
                    draggable: true,
                    opacity: 0.5,
                    editable: true
}
});
  drawingManager.setMap(map);
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);

google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {
            polygon.setMap(map);
    });

But still not quite the same as for ymaps.Polygon.
How to achieve the same behavior in Google API?

Answer 1

Greetings, I came across a question that may not be relevant anymore. But it's of little use.
I did this
https://jsfiddle.net/n4tj5yj3/

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 53.905551719718574, lng: 27.55868911743164},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var MobilePoligon = function( map ) {

          //Линия
          var polyline = new google.maps.Polyline({
                  map: map,
                  strokeWeight: 2,
                  strokeColor: 'rgb(1, 1, 1)',
                  editable: true,
                  path: [] // Без указания координат
          });

          //Полигон
          var polygon = new google.maps.Polygon({
                  map: map,
                  strokeColor: 'rgb(1, 1, 1)',
                  strokeOpacity: 0.1,
                  strokeWeight: 2,
                  fillColor: 'rgb(1, 1, 1)',
                  fillOpacity: 0.2,
                  editable: true, 
                  paths: [] // Без указания координат
          });

          //Храним координаты
          var paths = polyline.getPath();

          //Сохраним первые координаты
          var firstClick = false;

          //Протягиваем линию 
          var updatePath = function( evt ){
             // Обьект координат
             var latLng = new google.maps.LatLng( evt.latLng.lat(), evt.latLng.lng() );

             if(paths.length == 0 && !firstClick) firstClick = latLng;

             //Добавляем к уже сохраненным
             paths.push( latLng );
             //Протягивам линию к новой точке
             polyline.setPath( paths );

          };

          //Слушаем клик по карте
          google.maps.event.addListener( map, 'click', updatePath );

          //Отрисуем полигон при клике на первые координыты
          var polygonDraw = function( evt ){
                var lat = evt.latLng.lat();
                var lng = evt.latLng.lng();

                //Сравниваем с первым кликом
                if( lat === firstClick.lat() && lng === firstClick.lng() ){
                    polyline.setMap( null ); //Убираем линии
                    polygon.setPath( paths ); //Ставим полигон
                    polyline.setPath( [] );
                }

          };

          //Слушаем клик по точкам линии
          google.maps.event.addListener( polyline, 'click', polygonDraw );
  }

  var mobilePoligon = new MobilePoligon( map );