30621


**Google Maps API で、クリックする度に、追加した地点を加味したpolygonを表示したいのですが、**  
・デフォルトの状態

[code]

      // 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);
    
[/code]

* * *

**下記のような感じにしたら、前回クリックした時に作成したpolygonの上に新たにpolygonが作成されてしまいます**  
・クリックする度に、google.maps.Polygonが作成され(?)、前回作成したポリゴンと重なった部分のポリゴン色が濃くなってしまいます

[code]

    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);
    
[/code]

* * *

**試したこと**  
・削除後作成すれば良いかと思い、リファレンスを見て、setMapと同じ所に書いてあったremoveを記述したら

[code]

    bermudaTriangle.remove();
    bermudaTriangle.setMap(map);
    
[/code]

エラーになりました

> Uncaught TypeError: bermudaTriangle.remove is not a function(…)

[API公式](https://developers.google.com/maps/documentation/javascript/examples/polygon-
simple)


CC BY-SA 3.0
2016-11-16T03:59:22.507
30439
2016-11-24T06:35:14.023
7886
question
javascript api
Google Maps API で、クリックする度に、既存のpolygonを一旦削除後、再度作成するには？


とりあえず解説付きのコードを貼っておきます。

[code]

    // polygonの座標
    var paths = [];
    
    // 地図を初期化
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -18.818486, lng: 169.158182},
        zoom: 9,
    });
    
    // polygonの初期化と地図への配置（最初はpathsが空なので何も表示されない）
    var polygon = new google.maps.Polygon({
        paths: paths,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    polygon.setMap(map);
    
    // 地図クリック時
    google.maps.event.addListener(map, 'click', function(evt){
        // polygonの座標にクリックした緯度経度を追加
        paths.push({
            lat: evt.latLng.lat(),
            lng: evt.latLng.lng()
        });
    
        // polygonの座標を更新
        polygon.setPaths(paths);
    });
[/code]


CC BY-SA 3.0
2016-11-23T19:03:45.593
30621
2016-11-24T06:35:14.023
2016-11-24T06:35:14.023
19526
19526
30439
answer