Presto* Weblog: LineageII World on GoogleMaps （GoogleMapsでリネージュ2のマップを表示）

　リネージュ2のマップを、ブログ記事やHPに簡単に表示できるツールがあれば、世の中なんて便利なことか。
　たとえば、その日行った狩場をブログ日記で示したり、ボスやクエストを説明するのにHPに挿入してみたり･･･。

　ということで、右にあるような地図ツール（ブログパーツ?）を作っちゃいました。

　ちなみこれ、GoogleMapsのようにドラッグしてグリグリ動かせるんですっ!
　というか、ただのGoogleMapsです･･･^^;　（正確には、GoogleMapsのうえにリネージュ2のマップを貼り付けてるだけです）。
　なので、あんまりグリグリ動かすとアメリカ大陸が見えてきます･･･（コロンブスの気分が味わえます。謎）

　一週間前の記事にも取り付けてたんですが、IEの方は見れなかったみたいで、この地図のことを記事にするのを控えてました。そして、このほどIEでのエラー（単に文字コードの問題だったみたい･･･）も解決したのでその方法をご紹介しようというわけです。
　と、偉そうに言ってますが、ほとんどココのパクリです^^;

　まず、以下のスクリプトを自分のブログ、またはHPの<Head>~</Head>部分にコピーします。一行目の***********の部分には、自分のGoogleMapsのAPIキーを入力します（APIキーは、http://www.google.com/apis/maps/の「Sign up for a Google Maps API key」から取得できます）。

<script src="http://maps.google.com/maps?file=api&v=2&key=***********" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*貼り付ける地図の位置、大きさ、画像を指定*/
    function TestOvy(){
        this._x=-140;
        this._y=0;
        this._w=13.59;
        this._h=19.65;
        this._src="http://static.lineage2.jp/images/guide/gameinfo/worldmap_img1_pop.jpg";
        }
    TestOvy.prototype = new GOverlay();
    TestOvy.prototype.initialize = function(map) {
        var div = document.createElement("img");div.style.backgroundColor = "pink";div.style.position = "absolute";div.src=this._src;
        map.getPane(G_MAP_MARKER_PANE).appendChild(div);this._div = div;this._map=map;
        }
    TestOvy.prototype.redraw = function(force){
        if (!force) return;
        var m=this._map,z=m.getSize(),s=m.getBounds().toSpan(),p=m.fromLatLngToDivPixel(new GLatLng(this._y,this._x));
        this._div.style.width=z.width*(this._w/s.lng())+"px";
        this._div.style.height=z.height*(this._h/s.lat())+"px";
        this._div.style.left=p.x+"px";
        this._div.style.top=p.y+"px";
        }
    function load() {
        if (GBrowserIsCompatible()) {
            var objDiv=document.getElementsByTagName('div');
            for(i=0; i < objDiv.length; i++){
                if(objDiv[i].className.match("lineagemap")){
                    var mapclass = objDiv[i];
                    var mapx = mapclass.title.substring(0,mapclass.title.indexOf(",",0));
                    var mapy = mapclass.title.substring(mapclass.title.indexOf(",",0)+1,mapclass.title.length);
                    var map = new GMap2(mapclass);
/*表示倍率を指定（map.setCenter(new GLatLng(mapx,mapy), ズームレベル)、ズームレベル：0~17）*/
                    map.setCenter(new GLatLng(mapx,mapy), 7);
                    map.addOverlay(new TestOvy());
                    map.addOverlay(new GMarker(new GLatLng(mapx,mapy)));
                    GEvent.addListener(map, 'click', function(overlay, point){alert(point);});
                    }
                }
            }
        }
</script>

　つぎにBodyタグに、onload="load()"を挿入してください。

<body onload="load()">

　ここまでできたら、あとは地図を挿入したい場所につぎのHTMLを入れてやればOKです。

　Class属性"lineagemap"は、このタグにGoogleMapsを挿入することを意味しています（なので削除しないでください^^）。
　Title属性には、ピンを打つ位置の座標を入れます（ピンを挿した位置が中心となるように地図が表示されます）。ピンを打ちたい座標を取得するには、地図上で希望の位置をクリックしてやります。すると、アラートで座標が表示されますので、それをコピーすれば簡単です。
　地図の大きさはこのタグのStyle属性で決まります（適当にかえちゃってください）。

<div class="lineagemap"
style="margin: 1em; width: 150px; height: 150px;
title="-9.622414142924791, -131.72607421875"></div>

　基本的にうえのJavascriptが<Head>~</Head>に入っていれば、あとは座標を指定したHTMLタグを貼り付けるだけで簡単に追加できます。
　最初にも言いましたが、GoogleMapsそのものなので、いろいろ便利な使い方ができるかもしれません（クエストのルートを示したり、各場所のいろんな情報を示したり・・・）。

【注意点】