Question

Ok, here is my problem, I’ll put a picture to illustrate it easier.

I need the user to draw some polygons, representing the coverage area.

The polygon needs to have fixed number of points (vertex) because it goes into a processing algorithm later, and it would be really slow if a polygon can contain a lot of points.

Anyway, in my example lets stick to hexagons (6 points).
The user need to be able to drag the polygon around and modify it, but not change the number of points.

I tried setting the editable: true option for the polygon, it works fine, but it gives me the situation shown on the picture. It creates a handle for every point, and another handle (semi-transparent) in the middle between each points. Now, if the user moves that semi-transparent point, it will add another point (vertex) to the polygon, and add additional two handles in the middle of newly created lines. That gives us a 7 point polygon.

The best option would be to remove those semi-transparent handles, so the user can only drag polygon points, and it that way he can’t affect the total number of points.

Can I achieve this using google maps editable option?

Answer 1

Since no one seems to have a better solution, I’m marking my workaround as accepted, in case someone stumbles upon the same problem. Not very pretty, but gets the job done

The only solution I found so far is to hide the handles manually after the polygon has been drawn. The problem here is that the handles don’t have any CSS class or id, so I have to hide all divs with opacity 0.5 (opacity of the handles). It works, but it is pretty risky, considering that something else might have the same opacity and doesn’t need to be hidden.

// variables
var map, path, color;

polygon = new google.maps.Polygon({
    paths: path,
    strokeColor: color,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: color,
    fillOpacity: 0.10,
    editable: true,
});
polygon.setMap(map);
setTimeout(function(){ map.find('div[style*=opacity: 0.5]').hide(); }, 50);