＜国土地理院の地図を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( '地理院地図');
});
No.725