FC2ブログ

google map で住所から算出された緯度経度をもとに地図を表示

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);
の下に追記して
再度読み込むと
住所にマーカーが設置される
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック