ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


javascript:google-mapper

文書の過去の版を表示しています。


Google Mapsをほどよくカスタマイズしてお手軽に表示 - Google Mapper

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

※Google Maps API V3を使いたい場合は、Google Mapper V3をどうぞ。8-)

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

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

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

バージョン0.2.0からは、左下に検索ボックスを表示するようにした。また、マウスホイールのスクロールによるズームにも対応した。

サンプル

使い方の例

事前に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);

ライセンス

ダウンロード

GoogleMapper.js

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

ソースコード

/**
 *  GoogleMapper.js
 *  @see       http://0-oo.net/sbox/javascript/google-mapper
 *  @version   0.2.0
 *  @copyright 2008-2009 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/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"}
     *  ];
     *  ・lat, lngは必須
     *  ・titleはMarkerにマウスカーソルを当てたときに表示される
     *  ・openFlg = true の場合、地図の初期表示時に吹き出しが表示される
     *  ・その他に getInfoHtml() で使いたいデータを入れてもOK
     */
    points: [],
 
    /**
     *  地図をクリックされた時に情報Windowを表示するかどうか
     *  trueにすると、副作用としてダブルクリックによるズームを無効にする
     */
    pointable: false,
 
    /**
     *  検索結果に表示されるAdSenseの設定
     *  (例)
     *  GoogleMapper.barAdsOptions = {
     *      client: "partner-pub-xxxxxxxxxxxxxxxx",
     *      channel: "xxxxxxxxxx"
     *  };
     */
    barAdsOptions: {},
 
    /** 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), {
            googleBarOptions: {
                style: "new",   //新バージョンの検索窓
                adsOptions: GoogleMapper.barAdsOptions
            }
        }));
 
        GoogleMapper.setupMap(map);
 
        GoogleMapper.custom.initCallback();
 
        //地図を表示
        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  GMap2   map
 */
GoogleMapper.setupMap = function(map) {
    var ui = map.getDefaultUI();
 
    if (ui.controls.scalecontrol) { //largeの場合のみtrueになっている
        ui.controls.scalecontrol = false;           //縮尺
        map.enableGoogleBar();                      //統合検索コントロール
        map.addControl(new GOverviewMapControl());  //概観地図
    }
 
    if (GoogleMapper.pointable) {
        ui.zoom.doubleclick = false;    //ダブルクリックによるズーム
 
        //地図をクリックされた時のイベント
        GEvent.addListener(map, "click", function(overlay, latlng) {
            if (latlng) {   //Windowを閉じる時のクリックは無視
                map.openInfoWindowHtml(
                    latlng, GoogleMapper.custom.getClickInfoHtml(latlng)
                );
            }
        });
    }
 
    map.setUI(ui);
    map.enableContinuousZoom();     //滑らかなズームを有効にする
};
/**
 *  マーカーを追加する
 *  @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));
};
 
 
 
/******************************************************************************
 *  以下はサイトに合わせて上書きする関数
 ******************************************************************************/
 
/**
 *  Google Mapsが使用できない環境の場合に呼ばれる
 */
GoogleMapper.custom.onUnavailable = function() {
    alert("このブラウザでは地図を表示できません");
};
/**
 *  マーカーの画像を返す
 */
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を作成して返す
 *  @param  Object  point   マーカー情報
 */
GoogleMapper.custom.getInfoHtml = function(point) {
    //Sample
    return point.title;
};
/**
 *  地図をクリックされた時に表示する吹き出しの中身のHTMLを作成して返す
 *  (GoogleMapper.pointable = true の場合のみ有効)
 *  @param  GLatlng     latlng  緯度経度
 */
GoogleMapper.custom.getClickInfoHtml = function(latlng) {
    //Sample
    var info = "緯度: " + latlng.lat() + "<br />経度: " + latlng.lng();
    info += "<br />ズーム: " + GoogleMapper.map.getZoom();
    return info;
};
/**
 *  初期表示時のコールバック関数
 */
GoogleMapper.custom.initCallback = function() { /* pass */ };
javascript/google-mapper.1265059874.txt.gz · 最終更新: 2010/02/02 06:31 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki