あにねこ電脳覚書 - サポート掲示板

＜国土地理院の地図をGoogleMap API に表示する＞

(1) var map = new google.maps.Map 　から
scaleControl: true　});　までの
コードの替わりに、次のコードを書き込む

var mapOpt = {
zoom: Number(param.zoom),
center: new google.maps.LatLng(param.lat, param.lng),
scaleControl: true,　　　　　//スケールを付ける
overviewMapControl: true,　　//オーバービュー機能を有効にする
mapTypeId: google.maps.MapTypeId.TERRAIN,　//google地形地図がデフォルト
mapTypeControlOptions: {
mapTypeIds: [　　//地図の表示順番上から
'地理院地図',　//1行は5文字以内で
'地理院淡色',　//6文字目以上は改行される
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
],　//地図の選択をドロップダウンメニューにする
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};

(2) 国土地理院標準地図を定義（prototype.は省略不可)
function stdMap() {
stdMap.prototype.tileSize = new google.maps.Size(256,256);
stdMap.prototype.maxZoom = 17;
stdMap.prototype.name = '地理院地図';
stdMap.prototype.alt = '国土地理院標準地図'; //マウスを重ねたとき表示
stdMap.prototype.getTile = function( tile, zoom, ownerDocument ) {
var tileImg = ownerDocument.createElement('img');
var url= "http://cyberjapandata.gsi.go.jp/xyz/std/"
+ zoom.toString() + "/" + tile.x.toString() + "/"
+ tile.y.toString() + ".png";
tileImg.src = url;
tileImg.style.width = this.tileSize.width + 'px';
tileImg.style.height = this.tileSize.height + 'px';
return tileImg;
};
}

(3) 国土地理院淡色地図も同様に定義　
stdMap → paleMap　に全部を替える
地理院地図 → 地理院淡色(例)、また 標準地図 → 淡色地図 に替える
var url= "http://cyberjapandata.gsi.go.jp/xyz/pale/" に替える

(4) 地理院地図をセットし、地理院地図をデフォルトに変更
var mapDiv = document.getElementById('map_canvas');
var map = new google.maps.Map(mapDiv,mapOpt);
map.mapTypes.set( '地理院地図', new stdMap() );
map.mapTypes.set( '地理院淡色', new paleMap() );
map.setMapTypeId( '地理院地図');
});