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”を示す

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です