1)Google 地図表示
１）APIの取り込み
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
sensorの引数は端末GPSなど使うかの指定。true:利用
2)DIVタグの用意
＊ID属性をつけないと指定できない
width,heightで表示サイズを指定できる。指定しないと全画面？
<div style="width:400px,height:300px" id="mymap"/>
3)google.Maps.Mapクラスの生成(初期処理）
var map = new google.maps.Map(document.getElementById('mymap'), myOptions);
オプションとして、
zoom: 表示倍率
center: 中心位置
mapTypeID: 地図表示タイプ
の３つは必要
zoomは整数値で指定 (０ー１９、数値が大きくなるほど拡大、小さくなるほど縮小)
centerはgoogle.maps.LatLngクラスで緯度、経度を指定する。
mapTypeIDはgoogle.maps.MapTypeIdクラスで定義されている定数を指定する
ROADMAP:地図のみ
SATELLITE:航空写真のみ
HYBRID:航空写真＋地図
TERRAIN:地形
4)google mapを表示するためのイベントを設定
a) HTMlタグにイベントを記述
<body onload="initialize();">
b) Javascriptでイベントリスナーを登録
google.maps.event.addDomListener()メソッドを利用して、イベントと、Javascriptの関数を指定する。
google.maps.event.addDomListener(イベント対象オブジェクト, 'イベント名', 関数オブジェク
ト);
例）ウィンドウ（ブラウザ）のロード終了時にinitialize関数を呼び出す
google.maps.event.addDomListener(window, 'load', initialize);
2)任意位置に移動
mapオブジェクトのsetCenter()メソッドを利用
map.setCenter(new google.maps.LatLng(lat,lng));
いわき駅：37.05846492309772,140.89227676391602
3)表示中地図の中心位置を取得
map.getCenter()で、google.maps.LatLngが取得できる
google.maps.LatLngからは
緯度：lat(),経度:lng()
でそれぞれ取得できる
4)マーカーを表示
google.maps.Makerクラスを利用
animationを指定すると、表示する際のアニメーションを指定することができる。
var maker= new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,//表示したい地図
animation:google.maps.Animation.DROP,
title: 'いわき駅'
icon:'images/sample.jpg'
});
0 件のコメント:
コメントを投稿