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

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

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なっ・・・

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

2017.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します!

続きを読む

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

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

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

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

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