2010年2月19日金曜日
Google Maps API はじめました

タイトルどおり、今日から始めました。

ソースが読みにくいのはご勘弁。
テンプレートを替えようかな?

開発者ガイド (Google Maps API Version3 日本語ドキュメント(非公式))
http://sites.google.com/site/gmapsapi3/


Geekなぺーじ : Google MAPS APIプログラミング
http://www.geekpage.jp/web/google-maps-api/


とりあえずJavaScriptも覚えないといかんかなぁ?

手始めにversion3の日本語ドキュメントのチュートリアルから始める。
まぁ、ここは表示するだけなので、特に問題はない。

次はイベント。
Google Maps API Version3 イベント (Google Maps API Version3 日本語ドキュメント(非公式))
http://sites.google.com/site/gmapsapi3/Home/mapsapi-v3


「UIイベントの中の引数にアクセスする」という項目がある。
クリックした箇所にマーカーを置いて、そこをブラウザのセンターに持ってくるというヤツ。
折角なので、マーカーに吹き出しを付けてみる。
次の項目「イベントリスナでクロージャを利用する」で吹き出しの出し方が出てるので、流用する。

元のソースはこちら。


function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location
, map: map
});
map.setCenter(location);
}


変更後
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location
, map: map
});
// マーカーにタイトル(ツールチップ)を追加する
marker.setTitle('テスト');
// 吹き出しの設定
var infowindow = new google.maps.InfoWindow({
content: 'クリックされたのはここです<br>緯度:'
+ location.lat()
+ '<br>経度'
+ location.lng()
, size: new google.maps.Size(50,50)
});
// 吹き出しの表示
infowindow.open(map, marker);
// クリックした箇所をセンターに移動させる
map.setCenter(location);
}

ボチボチいきますか。



0 コメント | コメントを書く
Template Design: © 2007 Envy Inc.