マルティスープ
Staff Blog

2016.08.26

国土地理院の地図でストリートビューを見る

みなさん、こんにちは!

前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で、国土地理院の地図を表示させ、さらにGoogle のストリートビュートと連動する方法を説明します。

Google ストリートビューは、360度のパノラマ画像を世界中のありとあらゆる場所で撮影し、Google マップ上で表示することができるサービスです。

Google 以外にも様々な地図サービスはありますが、このような360度画像を世界中で見ることができるサービスは、Google ストリートビューしかありません！

では、早速コードを見ていきましょう。

//共通変数
var _map = null;
var _pano = null;
var _zoom = 15;
var _center =  new google.maps.LatLng(35.66, 139.74);

//地図の初期化
var initMap = function() {
	var chiriin = "地理院地図";
	_map = new google.maps.Map(document.getElementById("map"), {
		center: _center,
		zoom : _zoom,
		streetViewControl: true, 	//ストリートビューを有効
		scaleControl: true,
		mapTypdId: chiriin,
		mapTypeControlOptions: {
			mapTypeIds: [chiriin]	//マップタイプに国土地理院の地図を設定
		}
		
	});
	
	//国土地理院の地図を取得するためのイメージマップタイプ
	var chiriinMapType = new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
			return 'https://cyberjapandata.gsi.go.jp/xyz/std/'
				+ zoom + '/' 
				+ coord.x + '/' 
				+ coord.y + '.png';
		},
		tileSize: new google.maps.Size(256, 256),
		maxZoom: 19,
		minZoom: 0,
		name: chiriin 
	});
	_map.mapTypes.set(chiriin , chiriinMapType);
	
};

次にストリートビューオブジェクトを生成し、地図と連動させます。

//ストリートビューの初期化
var initPanorama = function() {
	//ストリートビューオブジェクトの生成
	_pano = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
		position: _center,
		pov: {
			heading:100,
			pitch: 10
		}
	});
	//地図にストーリーとビューを設定
	_map.setStreetView(_pano);
};

以下にサンプルのデモサイトを表示します。人型のアイコンをドラッグすれば、いつものストリートビューと同様な操作も可能です。

Full Screen

いかがでしょうか？

Google Maps JavaScript API を使用すれば、こんなに簡単に国土地理院の地図とストリービューを表示されることができます！

是非、ご活用ください。

参考：Google Maps で OpenStreetMap を表示する！

マルティスープでは、Google Maps APIs を使った開発を一緒に携わってくれる仲間を募集しています！
ご興味のある方は以下よりお問い合わせください。

マルティスープ株式会社　採用担当
TEL:03-3518-9013
Mail: info[@]multisoup.co.jp