Google Maps api - drawing library fill polygon before closing shape

Question

I have a google map and I am using the drawing library to let the user draw polygons on the map by clicking to add points. As a comparison I looked at trulia.com. I don't know how the drawing library setup is being made on trulia (uses backbone and other stuff). While I draw a shape, I want it to get filled as soon as I have 3 points, even if I am still drawing, and the fill should change as I add new points (indicating what the shape/area would be if you'd close it in that moment).

On trulia.com, as soon as you have a 3rd point, the area designated by the existing points gets filled, even though you haven't finished adding points. They're using google maps api, right? But I can't find the setting for something like "fill shape as you add points". I've searched google a lot, no luck.

Does anyone know how to setup the map or the drawing library to have that behavior? I don't think that this behavior can be setup in the polygonOptions (I've looked at all the options documented on developers.google.com)... so, the setting must be somewhere else...

Off the cuff (and on my mobile), you'll probably need to use your mouse position (in LatLng) as the penultimate point from verticeCount=2 and up. I suspect the hard part will be "encouraging" the renderer to cleanup/redraw as the mouse moves. — elrobis, Apr 03 '14 at 23:14
so there is no option for this offered by google... sadly. thanks for answering — MrCroft, Apr 06 '14 at 09:10
Have you tried setting the `fillColor = #00FFFF;` and `fillOpacity = 0.8;` values for the polygonOptions? — elrobis, Apr 07 '14 at 18:12
@elrobis this has nothing to do with my question :) of course I already have a fillColor and fillOpacity set up, but the values from those options are only used when I've finished drawing and closed the shape. What I needed was for the shape to be filled as I am drawing and adding points, to get filled while adding each new point as if it were the closing point (but not actually close the shape untill I click on the initial point again) — MrCroft, Apr 08 '14 at 07:25

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

MrCroft, it seems @ddtpoison777 asked a similar question and found the solution among some Google Maps API samples. This is the relevant code taken from the example:

var poly;
var path = new google.maps.MVCArray;

function initialize() {
    poly = new google.maps.Polygon({
      strokeWeight: 3,
      fillColor: '#5555FF'
    });

    poly.setMap(map);
    poly.setPaths(new google.maps.MVCArray([path]));

    google.maps.event.addListener(map, 'click', addPoint);
}

function addPoint(event) {
    path.insertAt(path.length, event.latLng);

    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
      draggable: true
    });
    markers.push(marker);
    marker.setTitle("#" + path.length);
}

edited May 23 '17 at 12:19

Community

1
1

answered Apr 08 '14 at 16:21

elrobis

1,512
2
16
22

I gave up on this... stopped searching and moved on because I could (wasn't mandatory). I was actually looking to make sure if there is a drawing setting that would simply accomplish this, not do it myself :) It would have been natural for such a setting/drawing mode to exist. It's a visual aid... Shame on google. But, since I haven't explicitly stated that in my question, I have to accept your answer :P Thank you! – MrCroft Apr 15 '14 at 08:29
...that's just it, though, the API does seem to naturally support the behavior you want, which the code above accomplishes. If you just follow [the link](http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/poly_edit.html) and create three points, you'll see that. I suspect the trick is putting your points into their `MVCArray` object and assigning that object to the Polygon through its `setPaths()` method.. – elrobis Apr 15 '14 at 13:23
unfortunately it acts like a closed shape... because that's what it is I think. You can not put a point "inside" it, like you would if it wasn't closed. Let's say we have 3 points, you should be able to seet a 4th "inside" the triangle and the triangle shape would still change in a quadrilateral. So, I would have had to dive into more than the above code. Anyway, luckily I don't have to investigate anymore as I've moved past it... the initial desired behavior was like when you click "Draw Your Search" on trulia.com. I am not interested in doing that anymore. – MrCroft Apr 16 '14 at 16:05

Google Maps api - drawing library fill polygon before closing shape

1 Answers1