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

ボチボチいきますか。