（更新履歴とコメントはGoogle Mapper Archive - ゼロと無限の間のログでどうぞ。）
Google Maps APIのバージョン3（V3）が公開されたので、Google Mapperもそれに対応させてみた。
Google Maps API V3はまだLabs版でV2に比べて実装されている機能が少ないので、元のGoogle Mapperは残しておいて、それとは別に新しくGoogle Mapper V3を書き直した。
サンプル

Google Mapper V3 動作サンプル
ホテル旅館 × 地図から検索（応用例）
使い方の例

ソースコードの中の、GoogleMapper.demoを参照。
ライセンス

MITライセンスで。
ダウンロード

GoogleMapper-v3.js
※ダウンロードできるのは最新のBeta版の場合もあります
ソースコード

/**
 *  GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
 *  @see       http://0-oo.net/sbox/javascript/google-mapper-v3
 *  @version   0.3.1
 *  @copyright 2008-2010 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 *  See also Google Maps API V3 documents.
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/v3/
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/v3/reference.html
 */
var GoogleMapper = {
    /** Mapオブジェクト */
    map: null,
 
    /** 最後に開いた吹き出しオブジェクト */
    lastInfoWindow: null,
 
    /** 地名による検索時にリスト表示する最大件数 */
    maxCount: 10
};
/**
 *  地図を表示する（デフォルトは日本列島）
 *  @param  String  mapId   地図表示に使う要素（div等）のid属性
 *  @param  Number  lat     中心地点の緯度
 *  @param  Number  lng     中心地点の経度
 *  @param  Number  zoom    ズーム値
 */
GoogleMapper.show = function(mapId, lat, lng, zoom) {
    GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), {
        center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
        zoom: (zoom || 5),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
    });
};
/**
 *  マーカーを追加する
 *  （マーカーをクリックするとGoogleMapper.getInfo()の内容を吹き出しに表示する）
 *  @param  Number  lat        緯度
 *  @param  Number  lng        経度
 *  @param  String  title      (Optional) ツールチップ表示する文字列
 *  @param  String  imageUrl   (Optional) マーカー画像のURL
 *  @return Marker  openInfoWindow()を追加されたMarkerオブジェクト
 *
 *  （参考）Google Maps用のマーカー画像の配布サイト
 *  @see http://code.google.com/p/google-maps-icons/
 */
GoogleMapper.addMarker = function(lat, lng, title, imageUrl) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        title: (title || ""),
        icon: imageUrl
    });
    marker.setMap(GoogleMapper.map);
 
    marker.openInfoWindow = function() {
        GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker);
    };
 
    google.maps.event.addListener(marker, "click", marker.openInfoWindow);
 
    return marker;
};
/**
 *  吹き出しに表示する内容を作る
 *  @param  Marker  marker  吹き出しを表示するマーカー
 */
GoogleMapper.getInfo = function(marker) {
    return marker.title;
};
/**
 *  吹き出しを表示する（latLngとmarkerはどちらか一方を渡す）
 *  @param  String  content 吹き出しの中身のHTML
 *  @param  LatLng  latLng  (Optional) 吹き出しを表示する位置
 *  @param  Marker  marker  (Optional) 吹き出しを表示するマーカー
 */
GoogleMapper.openInfoWindow = function(content, latLng, marker) {
    if (!content) {
        return;
    }
    GoogleMapper.closeInfoWindow();
 
    var infoWindow = new google.maps.InfoWindow({ content: content, position: latLng });
    infoWindow.open(GoogleMapper.map, marker);
    GoogleMapper.lastInfoWindow = infoWindow;
};
/**
 *  吹き出しを閉じる
 */
GoogleMapper.closeInfoWindow = function() {
    if (GoogleMapper.lastInfoWindow) {
        GoogleMapper.lastInfoWindow.close();
    }
};
/**
 *  地図をクリック可能にする（ダブルクリックによるズームはできなくなる）
 *  @param  Function    callback    クリック時に呼び出されるCallback関数
 *                                  クリックされた地点のLatLngが渡される
 *                                  文字列（HTML可）を返すとそれを吹き出しに表示する
 */
GoogleMapper.beClickable = function(callback) {
    //ダブルクリックはクリックイベントも発生するので無効にする
    GoogleMapper.map.disableDoubleClickZoom = true;
 
    google.maps.event.addListener(GoogleMapper.map, "click", function(event) {
        GoogleMapper.openInfoWindow(callback(event.latLng), event.latLng);
    });
};
/**
 *  地名や施設名等で検索する（ジオコーディング）
 *  @param  String      keywords    検索したいキーワード
 *  @param  Function    callback    検索結果が渡されるCallback関数
 */
GoogleMapper.search = function(keywords, callback) {
    if (keywords) {
        (new google.maps.Geocoder()).geocode(
            { address: keywords },
            GoogleMapper.searchCallback
        );
    }
};
/**
 *  地名や施設名等で検索する（ジオコーディング）のコールバック関数
 *  1件の場合は地図上でその場所に移動、2件以上の場合は内容をalert()で表示
 *  @param  Array           response    GeocoderResponseの配列
 *  @param  GeocoderStatus  status
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/v3/reference.html#Geocoder
 */
GoogleMapper.searchCallback = function(response, status) {
    if (!GoogleMapper.checkResponseStatus(status)) {
        return;
    }
    var len = response.length;
    if (len == 1) {
        GoogleMapper.map.panTo(GoogleMapper.getGeocodeLatLng(response[0]));
        return;
    }
    var msg = len + "件ヒットしました\n";
    if (len <= GoogleMapper.maxCount) {
        for (var i = 0; i < len; i++) {
            msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
        }
    }
    alert(msg + "詳細な地名を追加してください");
};
/**
 *  緯度経度から地名を検索する（逆ジオコーディング）
 *  @param  LatLng      latLng      緯度経度
 *  @param  Function    callback    検索結果が渡されるCallback関数
 */
GoogleMapper.searchByLatLng = function(latLng, callback) {
    (new google.maps.Geocoder()).geocode({ latLng: latLng }, callback);
};
/**
 *  ある地点からある地点までの道順を表示する
 *  1度目に出発地点、2度目に目的地のlatLngを渡す
 *  @param  String or LatLng    point   地名 or LatLngオブジェクト
 *  @param  Boolean             walkFlg (Optional) 徒歩の道順にするかどうか
 *                                                 省略すると車の道順になる
 *  @param  String              panelId (Optional) 道順の説明を表示するdiv等のid
 */
GoogleMapper.direct = function(point, walkFlg, panelId) {
    if (!GoogleMapper._router) {    //1回目の呼び出しの場合
        GoogleMapper._router = { from: point, walkFlg: walkFlg, panelId: panelId };
        return;
    }
 
    var router = GoogleMapper._router;
    GoogleMapper._router = null;
 
    var renderer = new google.maps.DirectionsRenderer();
    renderer.setMap(GoogleMapper.map);
 
    panelId = (panelId || router.panelId);
    if (panelId) {  //道順の詳細を別パネルに表示する場合
        var panel = document.getElementById(panelId);
        panel.innerHTML = "";
        renderer.setPanel(panel);
    }
 
    var mode = google.maps.DirectionsTravelMode.DRIVING;
    if (walkFlg || router.walkFlg) {
        mode = google.maps.DirectionsTravelMode.WALKING;
    }
 
    var request = {
        origin: router.from,
        destination: point,
        travelMode: mode,
        provideTripAlternatives: true,
        unitSystem: google.maps.DirectionsUnitSystem.METRIC
    };
    var callback = function(response, status) {
        if (GoogleMapper.checkResponseStatus(status)) {
            renderer.setDirections(response);
        }
    };
    (new google.maps.DirectionsService()).route(request, callback);
};
/**
 *  GeocoderStatusの内容をチェックする
 *  エラーの場合はalert()を表示する
 *  @param  GeocoderStatus  status
 *  @return Boolean true: OK, false: OK以外
 */
GoogleMapper.checkResponseStatus = function(status) {
    switch (status) {
        case "OK":
            return true;
        case "ZERO_RESULTS":
            alert("該当する地域がありませんでした");
            break;
        default:
            alert("エラーが発生しました (" + status + ")");
    }
    return false;
};
/**
 *  GeocoderResponseから主な地名を取り出す
 *  @param  GeocoderResponse    geocodeResult
 *  @return String  地名
 */
GoogleMapper.getGeocodeAddress = function(geocodeResult) {
    var address = "";
    var components = geocodeResult.address_components;
    for (var i = components.length - 2; i >= 0; i--) {  //国名は省略
        address += " " + components[i].long_name;
    }
    return address.substring(1);
};
/**
 *  GeocoderResponseからLatLngオブジェクトを作る
 *  @param  GeocoderResponse    geocodeResult
 *  @return LatLng
 */
GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
    var location = geocodeResult.geometry.location;
    return new google.maps.LatLng(location.lat(), location.lng());
};
/**
 *  メインの地図に重ねて、右下に沖縄のミニ地図を表示
 *  @param  Array   markers (Optional) メイン地図に表示したMarkerの配列
 */
GoogleMapper.showOkinawa = function(markers) {
    var map = GoogleMapper.map;
    google.maps.event.addListener(map, "tilesloaded", function() {
        google.maps.event.clearListeners(map, "tilesloaded");
 
        //表示領域
        var outer = map.getDiv().appendChild(document.createElement("div"));
        outer.style.position = "absolute";
        outer.style.right = 0;
        outer.style.bottom = "1.2em";
        outer.style.overflow = "hidden";
        outer.style.width = "150px";
        outer.style.height = outer.style.width;
        outer.style.border = "solid 0 #ccc";
        outer.style.borderWidth = "3px 0 3px 3px";
 
        //実際に地図が載るところ
        var inner = outer.appendChild(document.createElement("div"));
        inner.style.height = "250px";
        inner.style.top = "-50px";
 
        var okinawa = new google.maps.Map(inner, {
            center: new google.maps.LatLng(26.5, 127.9),    //沖縄本島の中心あたり
            zoom: map.getZoom(),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true, //操作系は不可で
            disableDoubleClickZoom: true,
            draggable: false,
            keyboardShortcuts: false,
            scrollwheel: false
        });
 
        //閉じるボタン
        var closeBtn = outer.appendChild(document.createElement("div"));
        closeBtn.innerHTML = "×";
        closeBtn.style.position = "absolute";
        closeBtn.style.top = 0;
        closeBtn.style.right = 0;
        closeBtn.style.padding = "0 3px";
        closeBtn.style.backgroundColor = "#ddd";
        closeBtn.style.cursor = "pointer";
        closeBtn.onclick = function() { outer.style.display = "none"; };
 
        //ミニ地図をクリックすると拡大してメインの地図に表示
        google.maps.event.addListener(okinawa, "click", function() {
            map.setCenter(okinawa.getCenter());
            map.setZoom(okinawa.getZoom() + 4);
        });
 
        //メイン地図と同じ位置にマーカーを表示
        if (!markers) {
            return;
        }
        var addMarker = function (origin) {
            var marker = new google.maps.Marker({
                position: origin.position,
                title: origin.title,
                icon: origin.icon
            });
            marker.setMap(okinawa);
            google.maps.event.addListener(marker, "click", origin.openInfoWindow);
        };
        for (var i = 0, len = markers.length; i < len; i++) {
            addMarker(markers[i]);
        }
    });
};
/******************************************************************************
 *  使用例
 *  GoogleMapeer.demo("gmap", "route", "keywords");
 *  @param  String  mapId           地図を表示する場所（div等）のid属性
 *  @param  String  routerPanelId    (Optional) 道順を表示する場所（div等）のid属性
 *  @param  String  keywordInputId   (Optional) 検索用テキストボックスのid属性
 ******************************************************************************/
GoogleMapper.demo = function(mapId, routerPanelId, keywordInputId) {
    //地図を表示（緯度経度ズームを渡さないと日本列島を表示する）
    GoogleMapper.show(mapId);
 
    //マーカーを表示
    var iconUrl = "http://google-maps-icons.googlecode.com/files/moderntower.png";
    GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl);
    GoogleMapper.addMarker(34.7, 135.5, "大阪", iconUrl).openInfoWindow();  //最初から開く
    var naha = GoogleMapper.addMarker(26.2, 127.7, "那覇", iconUrl);
 
    //沖縄のミニ地図を表示
    GoogleMapper.showOkinawa([naha]);
 
    //地図上をクリック可能にする
    GoogleMapper.beClickable(function(latLng) { //クリックされた時のCallback関数
        //逆ジオコーディングして地名をタイトルバーに表示
        GoogleMapper.searchByLatLng(latLng, function(response, status) {
            if (GoogleMapper.checkResponseStatus(status)) {
                document.title = GoogleMapper.getGeocodeAddress(response[0]);
            }
        });
 
        //緯度・経度を吹き出しに表示
        var h = "緯度: " + latLng.lat() + "<br />経度: " + latLng.lng();
 
        //二つの地点間の車または徒歩の道順を表示
        if (GoogleMapper.demo.startFlg) { //スタート地点指定済みの場合
            GoogleMapper.demo.startFlg = false;
            GoogleMapper.direct(latLng);
            return "";  //この場合は吹き出し表示なし
        }
        GoogleMapper.demo.startFlg = false;
        GoogleMapper.demo.startRouting = function(walkFlg) {
	        GoogleMapper.demo.startFlg = true;
            GoogleMapper.direct(latLng, walkFlg, routerPanelId);
            GoogleMapper.closeInfoWindow();
        };
        var btn = '<input type="button" onclick="GoogleMapper.demo.startRouting(';
        h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";
        h += btn + 'false)" value="ドライブの場合" /> ';
        h += btn + 'true)" value="歩きの場合" />';
 
        return h;   //戻り値が吹き出しに表示される
    });
 
    //道順の終点はマーカーでもOKにする
    GoogleMapper.getInfo = function(marker) {
        if (GoogleMapper.demo.startFlg) {   //スタート地点指定済みの場合
            GoogleMapper.demo.startFlg = false;
            GoogleMapper.direct(marker.position);
            return "";
        }
        return marker.title;
    };
 
    //地名や施設名等で検索する（ジオコーディング）
    GoogleMapper.demo.search = function() {
        GoogleMapper.search(document.getElementById(keywordInputId).value);
    };
 
    //Firebugがあれば、中心点とズーム値をコンソールに表示
    if (!window.console || !window.console.log) {
        return;
    }
    var map = GoogleMapper.map;
    var log = function() {
        var center = map.getCenter();
        var latlng = "lat:" + center.lat() + ", lng:" + center.lng();
        console.log(latlng + ", zoom:" + map.getZoom());
    };
    google.maps.event.addListener(map, "idle", log);
};
Wiki内アクセスランキング
ソースの表示以前のリビジョン
文書の先頭へ
Menu

ゼロと無限の間に (Wiki)

作ったサイト

便利ツール（無料）

配布しているブログパーツ

ログ (Blog)

索引

Google Maps API V3を使って地図をお手軽に表示 - Google Mapper V3

サンプル

使い方の例

ライセンス

ダウンロード

ソースコード
