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

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

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、K・・・

続きを読む

2017.03.09

Google Maps 無償・有償 プラン診断

みなさん、こんにちは!

今日は、みなさんから質問の多いGoogle Maps APIsのプランについて、どっち(スタンダードプランorプレ・・・

続きを読む

2017.06.20

☆100回記念☆フリー素材コーナー作りました!

みなさん、こんにちは!明日は夏至ですね、予報だと雨予報ですが、是非晴れてほしいですね~

本ブログは、この記事で102回目の投稿になります^・・・

続きを読む

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

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)