FC2ブログ

Google Maps API V3 メモ

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
});

となる

スポンサーサイト



コメント

非公開コメント

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