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

Question

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

Hi all.

Yandex API allows you to build beautiful region, 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".
Another, simpler 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 at all like ymaps.Polygon.
How to achieve this same behavior in Google API?

Celestino asked July 9th 19 at 10:12

Related questions

More answers about "How to draw google.maps.Polygon as beautiful as ymaps.Polygon?"

1 answer

vidal.Glover98 answered on · Answer 1 · 2019-07-09T10:14:17.546Z

Greetings, stumbled upon the question may no longer relevant. But you never know useful.

I did

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

//Line
 var polyline = new google.maps.Polyline({
 map: map,
 strokeWeight: 2,
 strokeColor: 'rgb(1, 1, 1)',
 editable: true,
 path: [] // Without specifying the coordinates
});

//Polygon
 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: [] // Without specifying the coordinates
});

 //Store the coordinates
 var paths = polyline.getPath();

 //Store the first coordinates
 var firstClick = false;

 //Extend the line 
 var updatePath = function( evt ){
 // Object coordinates
 var latLng = new google.maps.LatLng( evt.latLng.lat(), evt.latLng.lng() );

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

 //Add to the already saved
 paths.push( latLng );
 //Patagium line to a new point
 polyline.setPath( paths );

};

 //Listen to click on the map
 google.maps.event.addListener( map, 'click', updatePath );

 //Will draw a polygon by clicking on the first coordinate
 var polygonDraw = function( evt ){
 var lat = evt.latLng.lat();
 var lng = evt.latLng.lng();

 //Compare with the first click
 if( lat === firstClick.lat() && lng === firstClick.lng() ){
 polyline.setMap( null ); //Delete line
 polygon.setPath( paths ); //Put the polygon
 polyline.setPath( [] );
}

};

 //Listen to click on the endpoints of a line
 google.maps.event.addListener( polyline, 'click', polygonDraw );
}

 var mobilePoligon = new MobilePoligon( map );