MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2016.08.26

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

img

みなさん、こんにちは!

前回、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

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描・・・

続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツ・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記