google map で住所から算出された緯度経度をもとに地図を表示
#16 住所を入力して地図を移動させる (3)
http://dotinstall.com/lessons/basic_google_maps/3516
を参考に
住所から算出された緯度経度をもとに地図を表示
この機能はいろいろと施設検索に使える
また、周辺情報を取得し
目的地の情報を得るために
他のAPI と組み合わせるのもおもしろいと思う
住所は result で帰ってくるので
それにあわせてマップの移動を行う
今回は panTo() を使うことで
移動先の地点が
すでに地図上で表示されている場合に
スムーズに移動するようになる
この panTo() は緯度経度を引数にとるので
map.panTo(result[0].geometry.location);
とすればOK
この追記する場所は
if のエラー判定で、成功した場合の処理として追記する
if(status == google.maps.GeocoderStatus.OK){
map.panTo(result[0].geometry.location);
}else{
alert(“error !”);
}
というようになる
とりあえず
これで動作確認のため
入力欄に適当に住所を入力
するとその場所まで地図が移動する
また、さらにわかりやすくするため
マーカーを設置
var marker = new google.maps.Marker({
position: result[0].geometry.location,
map: map
});
これを追記すれば
入力した住所にマーカーが設置される
position: result[0].geometry.location
は、マーカーの設置場所で
result[0].geometry.location
が入力した住所のこと
result に格納されているのでそれを指定している
map : map
は、どこに設置するかという対称を指定
値のmap は
var map = new goole.maps.Map(document.getElementById(‘map’), options);
で指定した map になる
この marker の設定を
var panTo(result[0].geometry.location);
の下に追記して
再度読み込むと
住所にマーカーが設置される