FC2ブログ

google map で住所を入力して地図を移動

google map で住所を入力して地図を移動

#14 住所を入力して地図を移動させる (1)
http://dotinstall.com/lessons/basic_google_maps/3514
を参考に
フォームに入力された住所をもとに地図を表示

やはり検索欄から地図を探すのが一番多そう

ちなみに、今回は新しいマップをつくる

まずは、フォームの設置から
<p><input type="text" id="address" value="">
<input type="button" value="表示" onclick="moveMap();">
</p>
とする

入力欄の input 要素に id をつけ

button のほうには java script の
ユーザ関数 moveMap() をクリックしたときの動作にする

次に、現在地図の大きさが css で

#map{
witdh :100%;
height: 100%;
}
だけど、これだと不具合がでるので
height:80%;
ぐらいにしておく

次に script 要素に地図の設定を記述

var latlng = new google.maps.LatLng(35.66, 139.69);
これで緯度経度指定

var options = {
zoom:15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
これで表示のため必須オプションを変数格納
zoom はズームレベル
center は地図の中心座標
mapTypeId はどのタイプの地図にするか指定

var map = new google.maps.Map(document.getElementById('map'), options);
で実際に地図を描画

document.getElementById('map')

id="map"を示す
スポンサーサイト



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

コメント

非公開コメント

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