Google Maps API で、クリックする度に、既存のpolygonを一旦削除後、再度作成するには?
Google Maps API で、クリックする度に、追加した地点を加味したpolygonを表示したいのですが、
・デフォルトの状態
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
下記のような感じにしたら、前回クリックした時に作成したpolygonの上に新たにpolygonが作成されてしまいます
・クリックする度に、google.maps.Polygonが作成され(?)、前回作成したポリゴンと重なった部分のポリゴン色が濃くなってしまいます
google.maps.event.addListener(map, 'click', function (e) {
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
//クリックすることにより、「lat」「lng」を動的追加
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
試したこと
・削除後作成すれば良いかと思い、リファレンスを見て、setMapと同じ所に書いてあったremoveを記述したら
bermudaTriangle.remove();
bermudaTriangle.setMap(map);
エラーになりました
Uncaught TypeError: bermudaTriangle.remove is not a function(…)