Google Maps Api V3: How to bind a marker to the vertices of a Polygon?

Question

I'm trying to bind markers to the vertices of a polygon, such that moving the markers will change the shape of the polygon.

    var polygonLine = new google.maps.Polyline(
    {
        path: [],
        map: map,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    polygonLine.getPath().push(new google.maps.LatLng(-31.95202, 115.8548));
    polygonLine.getPath().push(new google.maps.LatLng(-31.94980, 115.8586));
    polygonLine.getPath().push(new google.maps.LatLng(-31.95246, 115.8625));
    polygonLine.getPath().push(new google.maps.LatLng(-31.95508, 115.8558));

    var polygon = new google.maps.Polygon({map: map, path: polygonLine.getPath()});
    var vertices = polygon.getPath();

    for (var i = 0; i < vertices.getLength(); i++)
    {
        markers[i] = new google.maps.Marker({ position:vertices.getAt(i), map: map, draggable: true });
        vertices.getAt(i).bindTo('position', markers[i], 'position');      // Throws an error
    }

Now this doesn't work, because on the 2nd last line, vertices.getAt(i) returns a LatLng, which does not support the 'position' property.

Does anyone know how I might bind the marker to a vertice? Thanks :)

Answer 1

I would take a look at the source at this Google Code project with v3 API examples .

It seems to basically add a simple class that handles binding arrays, and then uses that with the bindTo call.