changing google maps polygon vertices

Question

Just a quick query - I'm sure it has a quick answer :) I'm trying to loop through an array of points defining a polygon in google maps and change them (my test programme is just decrementing the latitude by a small amount, to see if I can get it to work). I've taken my experimental code from the Bermuda Triangle example, but with a LatLong array rather than MVC.

   triangleCoords = [
      new google.maps.LatLng(25.774, -80.190 ),
      new google.maps.LatLng(18.466, -66.118 ),
      new google.maps.LatLng(32.321, -64.757 )
    ];

   bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    });

And I'm trying to alter the points with this:

var vertices = bermudaTriangle.getPath();

    for (var i =0; i < vertices.getLength(); i++) {
      var xy = vertices.getAt(i);
      vertices.setAt(i, new google.maps.LatLng( xy.lat()-0.01, xy.lng() ));
    }

But it doesn't work. Can anyone see what is wrong? Thanks

Answer 1

You've got an array of coordinates, saved as the variable vertices , which you've then updated with new values... and then what? All you've done is update an array.

If you want to redraw the polygon, you also need to then do:

bermudaTriangle.setPath(vertices);