2010年2月24日水曜日
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」とかしてたんで何も考えずにそうやってたら、再描画が上手くいかなかった。

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



0 コメント | コメントを書く
Template Design: © 2007 Envy Inc.