Google Maps API v3で円を描いてみる

郵便番号（三桁、四桁別々）と半径（キロメートル）を入力して、ボタンを押下すると、地図上に円を描くようにしてみる。
忘れないように、とりあえずfunctionだけ書いておく。
JavaScriptは始めたばかりなので、スマートかどうかは自信がない。

参考にしたのはここ。
Circle Object - Google Maps API V3 Reference - Google Maps JavaScript API V3 - Google Code
Maps API V3 Overlays (Google Maps API Version3 日本語ドキュメント(非公式))

Google Maps API V3 Demo Gallery - Google Maps JavaScript API V3 - Google Code
このページにリンクがはってるこのデモが一番参考になるのかな？
Circle Overlay
Drag the marker to move the circle

入力チェックをしてないので、注意すること。
一応、Version3で検証。

var map;
var circle;
// onloadは割愛
function drawCircle(){
  // 我ながら値の取得方法については不細工だなぁと
  var zip1 = document.getElementsByName('zip1')[0].value;
  var zip2 = document.getElementsByName('zip2')[0].value;
  var zipcode = zip1 + "-" + zip2;
  // Circle Overlayのサンプルに3000kmを3000000と指定していた
  // リファレンスを見たら、単位はメートルだったね 
  var radi = document.getElementsByName('radi')[0].value * 1000;
  // 色の指定はテキトー
  var circleColor = "#00AAFF";

  // 指定された郵便番号から緯度経度を取得する
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: zipcode}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // 地図を移動させる
      map.setCenter(results[0].geometry.location);
      map.setZoom(10);
      // 再描画の場合は、一旦前の円を消す
      if(circle){
        circle.setMap(null);
      }
      // 円の設定
      circle = new google.maps.Circle({
                fillColor: circleColor
                , strokeWeight: 1
                , radius: radi
                , center: results[0].geometry.location
      });
      // 円の描画
      circle.setMap(map);
    } else { 
      alert(zipcode + ' not found');
    }
  });
}

new Circle()するところで、参考にしたデモのソースが「map: map」とかしてたんで何も考えずにそうやってたら、再描画が上手くいかなかった。

とりあえず指定した郵便番号を中心とした円を描いてくれる。新しく郵便番号を入れて実行すれば前のを消して、新しい円を描いてくれる…はず。