google-maps-api-3 - 円のオーバーレイを描画してから、新しいマーカーのクリックに基づいてその位置を変更するにはどうすればよいですか? 複数の円を避けるにはどうすればよいですか?

Question

GoogleマップAPI v3を使用していて、マーカーまたは外部リンクをクリックすると、その特定のマーカーにマップがズームインし、その特定のマーカーに円が描画されます。「クリック」が発生するたびに、以下が実行されます。

    // DO CIRCLE...         

            //circle.setMap(null);  // CLEARS CIRCLE

                var circle = new google.maps.Circle({
                    map: map,
                    center: marker.position,
                    fillColor: '#0000FF',
                    fillOpacity: 0.2,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                });

                circle.setRadius(1609.344);
                circle.bindTo('center', marker, 'position');


 // END CIRCLE SECTION

いつでも 1 つの円だけを表示したいので、現在、4 つの異なるマーカーをクリックすると 4 つの異なる円が作成されますが、新しい円を描画する前に、最初にすべての円を削除したいと思います。これを試してみましたが、円を一緒に描く機能が無効になっているようです。

circle.setMap(null);

どうすればそれを達成できますか？可能であれば、最初のクリックで 1 つの円を描画し、最後にクリックしたマーカーにバインドして位置を移動するだけです。または、それができない場合は、円のオーバーレイをクリアしてから、最後にクリックしたマーカーにバインドされた新しい円を再描画します。