Google Maps API V3 メモ
Google Maps APIを使うには
javascript のライブラリの取り込みを行う
<script type=”text/javascript”
sec=”http://maps.google.com/maps/api/js?sensor=true”>
<<l/script>
次に、マップを表示する領域を div で指定する
<div id="map"></div>
あとは、表示するマップの大きさ
width と height で決めることもできるけど
スマートフォンやタブレット画面いっぱいに表示するなら
$("map").style.width=document.width+"px";
$("map").style.height=document.height+"px";
現在位置を取得したら、そこを中心にマップを表示するけど
このときに必要なのが
google.map.Maps オブジェクトの作成
このオブジェクトの引数は
マップを表示するdiv要素
マップの種類を設定したオブジェクト
というようになる
ソースにすると
var gmap =new google.maps.Map($("map"), option);
つまり、map が div 要素
option がマップの種類のオブジェクト
ということ
option のソースは
var option ={
zoom:16,
center:mypos,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
となっている
zoom はズームレベル
center は中心地点
mapTypeId はマップの種類
mypos のソースは
mypos = new google.maps.LatLng(lat,lng);
として現在地を geolocation API で取得した変数をセットしている
また、現在地にまーかーを表示するなら
google.maps.Marker オブジェクトを作成する
この引数には
Mapオブジェクト
マーカーを表示する位置を指定する
現在地にマーカーを配置するなら
var gmarker = new google.maps.Marker({
position: mypos,
map: gmap
});
となる