Google MAP API 導入メモ

いまさらながらGoogle MAP API 導入簡易メモ。

1. 下記ページでMaps API キーを手に入れる。
Sign Up for the Google Maps API – Google Maps API – Google Code

2. 座標指定だけでなく住所検索でも利用できる下記サンプルのソースを利用。
Google マップ

3. サンプルのソースの<script src=”http://maps.google.co.jp/maps?file=api&…>の部分のスクリプトの読み込み部分のkeyの値を1で取得した値に変更。

4. ソース少しだけ変更したものがこれ↓です。
Google Map サンプル

Javascript部分だけ抜粋

var map = null;
var geocoder = null;
var address = "大阪高島屋";
var infoMsg = "<b>"+address+"</b><br />外観が古くひそかにいい建物です。";
function loadMap() {
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GOverviewMapControl());
    map.addControl(new GMapTypeControl());
    //座標を利用する場合はこちらを利用する。geocoder以下はコメントアウトしましょう。
    //map.setCenter(new GLatLng(135.5010216, 34.6646465), 17);
    geocoder = new GClientGeocoder();
    geocoder.getLatLng(
            address,
            function(point) {
                if (!point) {
                    alert(address +"が見つかりません。");
                } else {
                    map.clearOverlays();
                    map.setCenter(point, 17);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                    marker.openInfoWindowHtml(infoMsg);
                }
            }
        );
    }
}
window.onload = loadMap;
window.unload=GUnload;

上記サンプルでは「高島屋大阪店」でマップを取得しています。
「address」に住所等を入れ、「infoMsg」に地図上に表示させたいメッセージを記入します。
とりあへずは最低限はこと足りるかと思います。全ソースが気になる方は直接のぞいてください。

参考URL
Google Maps API の例 – Google Maps API – Google Code
逆引きGoogle Maps APIリファレンス
 みんなの知識【ちょっと便利帳】緯度・経度を調べる(GoogleMapsAPI・地図作成用,10進数）