GoogleMapsAPI V3でマップとストリートビューをカスタマイズしてウェブサイトに表示させる最適なやり方

By@mtoksuyOn 2013年03月02日

Tag To
GoogleMapsAPIV3
ストリートビュー
JavaScript
code_box

GoogleMapsAPI V3でマップとストリートビューをカスタマイズしてウェブサイトに表示させる最適なやり方

マップやストリートビューを利用した事がないという人を捜す事の方が困難になってしまった感があります。わからなくとも使っているんじゃないでしょうか?

この技術を自由自在にカスタマイズできるようになれば webサービス作成の幅が広がりますので GoogleMapsAPI V3 を全くわからなくとも、この記事でみなさんが簡単なカスタマイズをしつつウェブサイトに表示出来るようにしたいと思います。

Google Maps API V3とは?

パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション

注: Google Maps JavaScript API バージョン 3（V3）は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。

Google Maps JavaScript API を使用すると、Google マップをウェブページに埋め込むことができます。この API のバージョン 3 は、従来のパソコン用ブラウザアプリケーションとしてだけでなく、携帯端末でも快適に動作するように設計されています。

この API では http://maps.google.co.jp サイトで使用できるような地図を操作し、さまざまなサービスを介してコンテンツを地図に追加するための多数のユーティリティを提供しています。これを利用して、ウェブサイトにパワフルな地図アプリケーションを作成できます。

JavaScript Maps API V3 は、誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスです。詳細については、利用規約をご覧ください。

パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション - Google Maps JavaScript API v3 — Google Developers

要はむちゃくちゃ便利な機能だから、がんがん使えって事ですね。

目次に戻る

Google Maps API V3を読み込もう

で、どうやってその便利な機能は使えるの?って事が一番重要なんですが

これをHTMLファイルに記述するだけでいいんです。

<!-- Google Maps API V3の読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

これだけです。

この絶対パスを読み込むだけで全てが動くようになっており、難しい事はgoogleさんに任せておいてこっちがやる事は設定だけです。ただ一つだけ、この記述内でやる事がありパラメーターのsensorを記述して GPS機能を使うかどうかの指定をします。

?sensor=trueが	GPS機能オン
?sensor=falseが	GPS機能オフ

現状、PCは GPS機能そのものがないのでオフでいいとは思いますが、GPS機能をオンにしていても良いんじゃないでしょうか?将来的に。ただ、これをオンにすると、どの程度負担がかかっているかは調べていません。

なお、sensorを送らないとgoogleさんにおこられますので必ず記述しましょう。

目次に戻る

マップとストリートビューを表示してみよう

では、次にマップとストリートビューを表示させてみましょう。

細かい設定がかなりあるのですが、先ずは表示させたい!って方が多いかと思いますので最小限の記述で表示させましょう。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>Google Maps JavaScript API V3:サンプルページ</title>
		<!-- Google Maps APIの読み込み -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript">

			// 変数群
			var map,svp;
			//--------------------------------------------
			//初期設定(ページを読み込んだ時に実行する関数)
			//--------------------------------------------
			function initialize() {
				// 緯度・経度変数
				var latlng = new google.maps.LatLng(35.674144,139.77675999999997);
				// 地図のオプション設定変数
				var myOptions = {
					// カメラの向き
					heading: -20,
					// 初期のズーム レベル
					zoom: 16,
					// 地図の中心点
					center:latlng,
					// 地図タイプ
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				//地図オブジェクト生成
				map = new google.maps.Map(document.getElementById('map'), myOptions);
				// ストリートビューオブジェクト生成
				svp = new google.maps.StreetViewPanorama(
					document.getElementById('svp'),{
						position : map.getCenter()
					});
				// ストリートビューオブジェクト詳細設定
				svp.setPov({heading: -20, pitch: 0, zoom: 0});
				// マップとストリートビューを一致させる為の記述
				map.setStreetView(svp);
			} // function initialize()
			// ページを読み込んだ時にinitialize()を実行
			google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	<style type="text/css">

@charset "utf-8";
/*****************
全体コンテンツ設定
*****************/
#wrapper {
    width: 780px;
    margin: 0 auto 50px;
}
/*******************************
ストリートビュー設定＆マップ設定
*******************************/
#svp_area {
	width:780px;
 height:400px;
 margin: 0 auto;
 padding: 5px 0px 10px 0px;
 border-radius: 2px;
}
#svp {
	width:780px;
 height:400px;
 margin: 0 auto;
}
#map {
	width:460px;
 height:300px;
 margin: 0 auto;
}
#text_area {
		margin: 0 10px 0 0;
    float: left;
    width: 310px;
}

	</style>
	</head>
	<body>
		<!-- wrapper -->
		<div id="wrapper">
			<h1>Google Maps JavaScript API V3:サンプルページ</h1>
			<!-- ストリートビュー表示 -->
			<div id="svp_area">
				<div id="svp"></div>
			</div> <!-- ストリートビュー表示 -->
			<!-- text_area -->
			<div id="text_area">
				<h3>八丁堀駅</h3>
				<p>八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。</p>
			</div> <!-- text_area -->
			<!-- マップ表示 -->
			<div id="map"></div>
		</div> <!-- wrapper -->
	</body>
</html>

サンプルページ

なお、全コピペでも動く記述なので是非活用して下さい。

では、次はカスタマイズしていきましょう。

目次に戻る

カスタマイズしよう

今回は僕にゆかりのある東京の駅をピックアップし、並べてスライド出来るようにして、その駅をクリックするとストリートビューとマップと説明テキストが変わり、ストリートビューは自動でくるくる廻る仕様にしました。最後にコードボックスとして無料配布致します。

先ずはカスタマイズ後のHTMLファイルを見て下さい。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>360°好きな駅ツアー</title>
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="css/common/common.css" media="all">
		<!-- Google Maps APIの読み込み -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<!-- jquery-1.7.1 -->
		<script type="text/javascript" src="js/jquery/jquery-1.7.1.js"></script>
		<!-- マップとストリートビューを表示させるjavascriptファイル -->
		<script type="text/javascript" src="js/common/common.js"></script>
	</head>
	<body>
		<!-- wrapper -->
		<div id="wrapper">
			<h1>Google Maps JavaScript API V3:サンプルページ</h1>
			<!-- ストリートビュー表示 -->
			<div id="svp_area">
				<div id="svp"></div>
			</div> <!-- ストリートビュー表示 -->
			<!-- text_area -->
			<div id="text_area">
				<h3>八丁堀駅</h3>
				<p>八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。</p>
			</div> <!-- text_area -->
			<!-- マップ表示 -->
			<div id="map"></div>
		</div> <!-- wrapper -->
	</body>
</html>

サンプルページ

JavaScriptやCSSを外部読み込みにしてスッキリしましたね。

では記述したJavaScriptはこちら。

// 変数群
var map,svp;
//--------
//初期設定
//--------
function initialize() {
	// 緯度・経度変数
	var latlng = new google.maps.LatLng(35.674144,139.77675999999997);
	// 地図のオプション設定変数
	var myOptions = {
		// カメラの向き
		heading: -20,
		// 初期のズーム レベル
		zoom: 16,
		// 地図の中心点
		center:latlng,
		// 地図タイプ
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	//地図オブジェクト生成
	map = new google.maps.Map(document.getElementById('map'), myOptions);
	// ストリートビューオブジェクト生成
	svp = new google.maps.StreetViewPanorama(
		document.getElementById('svp'),{
			position : map.getCenter()
		});
	// ストリートビューオブジェクト詳細設定
	svp.setPov({heading: -20, pitch: 0, zoom: 0});
	// マップとストリートビューの一致させる為の記述
	map.setStreetView(svp);
	// 緯度・経度確認
	google.maps.event.addListener(svp, 'tilesloaded', review);
	google.maps.event.addListener(svp, 'position_changed', review);
} // initialize() {
/***********  固定設定終了 ***********/
		// 回転関数
		function rotate() {
			// カメラの位置取得
			var pov      = svp.getPov();
			var _heading = pov['heading'];
			var _pitch   = pov['pitch'];
			var _zoom    = pov['zoom'];
			// 位置をずらす
			_heading     = _heading + 0.1;
			// 位置情報をセット(一番大事)
			svp.setPov( {
				heading:_heading, pitch:_pitch, zoom:_zoom
			});
		}
		// レビュー関数
		function review() {
			if(document.getElementById("res")) {
				document.getElementById("res").innerHTML = svp.getPosition();
			}
		}
		//------------------------------
		//ロード時に初期化(スタートです)
		//------------------------------
		google.maps.event.addDomListener(window, 'load', initialize);


		//--------------------
		//マウスやアクション系
		//--------------------
		$(function() {
			// 変数宣言
			var flag = 0;
			var latlng_array;
			var svp_area = document.getElementById('svp_area');
				// 回転くるくる
				timerID = setInterval('rotate()',20);
			//------------------------------
			//svp_areaにマウスオーバーしたら
			//------------------------------
			$('#svp_area').mouseover(function() {
				// くるくる解除
				clearInterval(timerID);
			});
			//----------------------------
			//svp_areaにマウスアウトしたら
			//----------------------------
			$('#svp_area').mouseout(function() {
				// くるくる再スタート
				timerID = setInterval('rotate()',20);
			});
			//-----------------
			// 左の矢印クリック
			//-----------------
			$('.y_l_btn').click(function() {
				var left_px     = ($('.slide_show_contents ul').css('left'));
				left_px         = left_px.replace('px','');
				left_px         = parseInt(left_px);
				var image       = $('.slide_show_contents ul li img');
				var image_width = image[0].width;
				if(flag == 0) {
					var first_li = $('.slide_show_contents ul li').eq(7);
					$('.slide_show_contents ul').prepend(first_li);
					$('.slide_show_contents ul').css({'left': -(image_width + 10) + 'px'});
					$('.slide_show_contents ul').animate({left: 0 + 'px'} ,500,'swing',function() {
						flag = 0;
					});
					flag = 1;
				}
					else {
					}
			}); // $('.y_l_btn').click(function() {
			//-----------------
			// 右の矢印クリック
			//-----------------
			$('.y_r_btn').click(function() {
				var left_px     = ($('.slide_show_contents ul').css('left'));
				left_px         = left_px.replace('px','');
				left_px         = parseInt(left_px);
				if(isNaN(left_px)) { left_px = 0;}
				var image       = $('.slide_show_contents ul li img');
				var image_width = image[0].width;
				if(flag == 0) {
					$('.slide_show_contents ul').animate({left: left_px + -(image_width + 10) + 'px'} ,500,'swing',function() {
						var first_li = $('.slide_show_contents ul li').eq(0);
						$('.slide_show_contents ul').append(first_li);
						$('.slide_show_contents ul').css({'left': left_px + 'px'});
						flag = 0;
					});
					flag = 1;
				}
					else {
					}
			}); // $('.y_l_btn').click(function() {
			//--------------
			//データセット系
			//--------------
			var id = 0;
			var latlng_i_array  = $([
				35.674144,
				35.691918,
				35.659298,
				35.698162,
				35.731098,
				35.671594,
				35.703601,
				35.588408]);
			var latlng_k_array  = $ ([
				139.77675999999997,
				139.701012,
				139.70043899999996,
				139.772443,
				139.710069,
				139.703004,
				139.57984999999996,
				139.727355]);
//35.674144, 139.77675999999997 八丁堀駅
//35.691918, 139.701012         新宿駅
//35.659298, 139.70043899999996 渋谷駅
//35.698162,139.772443          秋葉原駅
//35.731098,139.710069          池袋駅
//35.671594,139.703004          原宿駅
//35.703601, 139.57984999999996 吉祥寺駅
//35.588408,139.727355          大森駅
			var text_area_array = $(['八丁堀駅
八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。
','新宿駅
新宿駅（しんじゅくえき）は、東京都新宿区・渋谷区にある、東日本旅客鉄道（JR東日本）・京王電鉄・小田急電鉄・東京地下鉄（東京メトロ）・東京都交通局（都営地下鉄）の駅である。
','渋谷駅
渋谷駅（しぶやえき）は、東京都渋谷区にある、東日本旅客鉄道（JR東日本）・東京急行電鉄（東急）・東京地下鉄（東京メトロ）・京王電鉄の駅である。
','秋葉原駅
秋葉原駅（あきはばらえき）は、東京都千代田区にある、東日本旅客鉄道（JR東日本）・東京地下鉄（東京メトロ）・首都圏新都市鉄道の駅である。
','池袋駅
池袋駅（いけぶくろえき）は、東京都豊島区にある、東日本旅客鉄道（JR東日本）・東武鉄道（東武）・西武鉄道（西武）・東京地下鉄（東京メトロ）の駅である。
','原宿駅
原宿駅（はらじゅくえき）は、東京都渋谷区神宮前一丁目にある、東日本旅客鉄道（JR東日本）山手線の鉄道駅である。
','吉祥寺駅
','大森駅
大森駅 (東京都) - 東京都大田区にある東日本旅客鉄道（JR東日本）京浜東北線（東海道本線）の駅。']);

			$('.slide_show_contents ul li').each(function() {
				$(this).data('id',id);
				id += 1;
			});
			//------------
			//画面きりかえ
			//------------
			$('.slide_show_contents ul li').click(function() {
				var id = $(this).data('id');
				svp.setPosition(new google.maps.LatLng(latlng_i_array[id], latlng_k_array[id]));
				map.panTo(new google.maps.LatLng(latlng_i_array[id], latlng_k_array[id]));
				$('#text_area').html(text_area_array[id]);
			});
		}); // $(function() {

/*********** 固定設定終了 ***********/

というところまでが基本設定でその下がカスタマイズする記述です。

そして、一番大事なのは

		//------------------------------
		//ロード時に初期化(スタートです)
		//------------------------------
		google.maps.event.addDomListener(window, 'load', initialize);

この記述の上にカスタマイズする関数を書かないとエラーになります。

何故エラーになるかといいますと全てを読み込む前の記述しか読んでなくそんな関数ねーよっておこられてしまいます。なお、関数以外のカスタマイズの記述(要はGoogle MapsのAPIを操作する記述)はfunction initialize() { ここの中に記述しないとエラーになります }

という事でちゃんとカスタマイズ出来るようにGoogle Maps API V3の仕様を勉強しましょう。今回、全部書くと記事が長くなってしまうので省略させて頂きます。その代わりに新鮮で良い記事をピックアップしましたので、そちらからAPIの事やカスタマイズを覚えて下さい。