Google Maps APIメモ(v2)　#5 オリジナルのマーカーを追加する（まずは1種類1個だけ）

  • 投稿日
  • 更新日
  • 著者 nishiaki
  • カテゴリー Blog

シリーズ第5弾
第4弾で作ったマップにオリジナルのマーカーを追加してみる。
まずは1種類1個だけ。

参考にしたところ

オリジナルマーカー画像の作成について

アイコンの前面画像とアイコンの影（必要ない場合はなくてもいいんだろうけども）を作成するんだけども、起点は左上なので、影を書き出す時も、そこを気にして書き出せばOK。
Fireworksの場合は、背景透明で作って、PNG32で書き出せばいいみたい。影のアルファ値も保ってくれているようです。

  • 前面画像のようす

スクリプト

function createCustomTileLayer(){
    var dataLayer = new GTileLayer(new GCopyrightCollection(),0,3);
    //0,3はズームレベルの範囲
    dataLayer.getOpacity=CustomTileLayer_getOpacity;
    dataLayer.isPng=CustomTileLayer_isPng;
    dataLayer.getTileUrl=CustomTileLayer_getTileUrl;
    return dataLayer;
}
var CustomTileLayer_opacity = 1.0;
var CustomTileLayer_png = true;
var CustomTileLayer_getOpacity = function getOpacity() {
    return CustomTileLayer_opacity;
}

var CustomTileLayer_isPng = function getOpacity() {
    return CustomTileLayer_png;
}

var CustomTileLayer_getTileUrl = function(tile, zoom) {
    var x = tile.x;
    var y = tile.y;
    return "tiles/"+zoom+"/"+x+"_"+y+".png";
}

function createCustomProjection() {
    var myProjection = G_NORMAL_MAP.getProjection();
    myProjection.tileCheckRange = function (tile, zoom, tilesize) {
        var mapsize = 256*Math.pow(2,zoom);
        if (tile.y < 0 || tile.y * tilesize >= mapsize) {
            return false;
        }
        if (tile.x < 0 || tile.x * tilesize >= mapsize) {
            return false;
        }
        return true;
    }
    return myProjection;
}

snowIcon = new GIcon();
snowIcon.image = "./icon/snow.png";
snowIcon.shadow = "./icon/snow_s.png";
snowIcon.iconSize = new GSize(20,20);
snowIcon.shadowSize = new GSize(21,23);
snowIcon.iconAnchor = new GPoint(10,10);
snowIcon.infoWindowAnchor = new GPoint(10,10);

function initialize(){
    if(GBrowserIsCompatible()){
        var mapCustom = new GMapType([createCustomTileLayer()],createCustomProjection(),"")
        var map = new GMap2(document.getElementById("gMap"),{
            mapTypes:[mapCustom]
        });
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(0,0),1);
        var html = "追加した雪だよ";
        var marker = new GMarker(new GLatLng(60,60),snowIcon);
        GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
        });
        map.addOverlay(marker);
        //クリックされた場所の緯度、経度を表示
        GEvent.addListener(map, "click", function(marker, point) {
            document.getElementById("lat").innerHTML   = point.lat();
            document.getElementById("lng").innerHTML = point.lng();
        });
    }
}

右側の男の子の帽子の右上にオリジナルのアイコン置いてます。
マップを拡大縮小してもサイズが変わらないのがオリジナルのアイコンです。
通常、イラストのこの場所にアイコンを置きたい！とか決まっているはずなので、クリックしたらそこの緯度、経度を表示するようにしてます。
HTML側は、下記のようにしてます。

<div id="gMap"></div>
<ul>
<li>緯度(lat)：<div id="lat"></div></li>
<li>経度(lng)：<div id="lng"></div></li>
</ul>

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog（バックログ）の本体、告知サイト、Subversionページのインターフェースデザインも高田さんです。
関連エントリー

google google map api javascript

この記事を書いた人

nishiaki

記事一覧