（更新履歴とコメントはGoogle Mapper Archive - ゼロと無限の間のログでどうぞ。）

Google Mapsっていざ使おうとすると意外と面倒。そこで手軽にGoogle Mapsを表示できるようにした。
マーカーの表示も使いたいので、配列に位置情報を入れておけばマーカーが表示できるようにした。

久しぶりにGoogle Maps APIを読み返した（意外に変わってた）ら、便利そうなライブラリ（gmaps-utility-library）を見つけたのでついでに下記を取り込んでみた。

• マーカーのアイコン画像を色を指定するだけで手軽に作成
• マーカーが表示範囲外にある場合、それが分かるように表示

Japan Aquaria Map and Photos

事前にJavaScriptを読み込む。

<script type="text/javascript" src="http://www.google.co.jp/jsapi?key=[自分のGoogle MapsのAPI KEY]"></script>
 
<!-- 範囲外のマーカーを表示 -->
<script type="text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/release/src/markertracker_packed.js"></script>
 
<!-- マーカーのアイコンを簡単作成 -->
<script type="text/javascript" src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/release/src/mapiconmaker_packed.js"></script>
 
<script type="text/javascript" src="/js/GoogleMapper.js"></script>

後は表示するだけ。

//マーカーを表示する位置情報をセット
GoogleMapper.points = [
    {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},
    {lat: 35.2, lng: 136.9, title: "Nagoya"},
    {lat: 34.7, lng: 135.5, title: "Osaka", soulFood: "Takoyaki"}
];
//地図を表示する要素（divなど）のidと緯度・経度・ズーム値を指定して表示する
GoogleMapper.load("map", 37, 136, 6);

MITライセンスで。

GoogleMapper.js

※ダウンロードできるのは最新のBeta版の場合もあります

/**
 *  GoogleMapper.js
 *  @see       http://0-oo.net/sbox/javascript/google-mapper
 *  @version   0.1.0
 *  @copyright 2008 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 *  Also see Google Maps API documents.
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html
 */
var GoogleMapper = {
    /**
     *  マーカーを表示する位置情報
     *  （例）
     *  GoogleMapper.points =[
     *      {lat: 35.7, lng: 139.7, title: "Tokyo", openFlg: true},
     *      {lat: 35.2, lng: 136.9, title: "Nagoya"},
     *      {lat: 34.7, lng: 135.5, title: "Osaka", soulFood: "Takoyaki"}
     *  ];
     *  ・lat, lngは必須
     *  ・titleはMarkerにマウスカーソルを当てたときに表示される
     *  ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される
     *  ・その他は getInfoHtml() で使うために必要なデータなどを入れておく
     */
    points: [],
    /** loadしたGMap2オブジェクトがセットされる */
    map: null,
    /** サイトごとのカスタマイズをするための関数群 */
    custom: {}
};
/**
 *  @param   String  mapId   地図表示に使う要素（div等）のid属性
 *  @param   Float   lat     初期表示する中心地点の緯度
 *  @param   Float   lng     初期表示する中心地点の経度
 *  @param   Integer zoom    初期表示するズーム値
 *  @param   Object  loadOptions （省略可）Google Mapsをload時のオプション
 */
GoogleMapper.load = function(mapId, lat, lng, zoom, loadOptions) {
    // @see http://code.google.com/intl/ja/apis/ajax/documentation/#GoogleLoad
    google.load("maps", "2", loadOptions);
 
    google.setOnLoadCallback(function() {
        //IEのメモリリーク対策
        // @see http://code.google.com/intl/ja/apis/maps/documentation/#Memory_Leaks
        document.getElementsByTagName("body")[0].onunload = GUnload;
 
        //ブラウザが対応しているかチェック
        if (!GBrowserIsCompatible()) {
            GoogleMapper.custom.onUnavailable();
            return;
        }
 
        var map = GoogleMapper.map = new GMap2(document.getElementById(mapId));
 
        //地図タイプの設定
        // @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GMapType
        map.addMapType(G_PHYSICAL_MAP);
        map.setMapType(GoogleMapper.custom.getInitialMapType());
 
        //コントロールを追加
        // @see http://code.google.com/intl/ja/apis/maps/documentation/reference.html#GControlImpl
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
 
        //地図を表示
        map.setCenter(new GLatLng(lat, lng), zoom);
 
        var icon = GoogleMapper.custom.getIcon();
        for (var i = 0; i < GoogleMapper.points.length; i++) {
            GoogleMapper.addMarker(icon, GoogleMapper.points[i]);
        }
    });
};
/**
 *  マーカーを追加する
 *  @param  GIcon   icon
 *  @param  Object  point
 */
GoogleMapper.addMarker = function(icon, point) {
    var marker = new GMarker(
        new GLatLng(point.lat, point.lng), {title: point.title, icon: icon}
    );
    GoogleMapper.map.addOverlay(marker);
 
    var info = GoogleMapper.custom.getInfoHtml(point);
 
    //クリックされたら吹き出しを表示する
    GEvent.addListener(marker, 'click', function(){ this.openInfoWindowHtml(info); });
 
    if (point.openFlg) {    //最初から吹き出しを表示する
        marker.openInfoWindowHtml(info);
    }
 
    if (!window["MarkerTracker"]) {
        return;
    }
    //現在の表示範囲の外にあるマーカーが分かるようにする
    // @see http://gmaps-utility-library.googlecode.com/svn/trunk/markertracker/
    new MarkerTracker(marker, GoogleMapper.map);
};
 
 
//以下はサイトに合わせて上書きする関数
 
/**
 *  マーカーの画像を返す
 */
GoogleMapper.custom.getIcon = function() {
    if (!window["MapIconMaker"]) {
        return G_DEFAULT_ICON;
    }
    // @see http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/
    return MapIconMaker.createMarkerIcon({
        //Sample
        width: 32, height: 32,
        primaryColor: "#00FFFFFF", cornerColor: "#0099FFFF", strokeColor: "#666666FF"
    });
};
/**
 *  マーカーに表示する吹き出しの中身のHTMLを作成して返す
 */
GoogleMapper.custom.getInfoHtml = function(point) {
    //Sample
    if (point.soulFood) {
        return point.soulFood + " 大好き！";
    } else {
        return point.title;
    }
};
/**
 *  初期表示時の地図タイプを返す
 */
GoogleMapper.custom.getInitialMapType = function() {
    return G_NORMAL_MAP;
};
/**
 *  Google Mapsが使用できない環境の場合に呼ばれる
 */
GoogleMapper.custom.onUnavailable = function() {
    alert("このブラウザでは地図を表示できません");
};