かっこいいマップをホームページに設置できる。GoogleMapの色やデザインを変えてみよう。



ホームページの会社概要とかでGoogleMap使いますよね。
いつも見慣れたGoogleMapだとちょっと物足りない、自社サイトっぽくGoogleMapのデザインも変えてみたいって思ったことありません?
GoogleMapはマップの色をオリジナルに変更することができます。
ちょっと知識が必要だけれど、そんなに難しくは無いのでチャレンジしてみよう。

GoogleMap APIでマップを表示させる

GoogleMapをカスタマイズするには、GoogleMapページから共有タグとか引っ張ってきて表示させてもダメで、
APIを使ってマップを表示させないといけません。
まずは、
自由にカスタマイズしたければGoogleMap APIを使ってワンランク上のマップ表示を覚えよう
でホームページ上にGoogleMapを表示させましょう。

GoogleMapの色やデザインをカスタマイズする

GoogleMapのデザインを変更するのにコードを直接いじってもいいのですが、
誰でも直感的にデザインを変更できるツール「Styled Maps Wizard」がありますので、
それを使いましょう。

GoogleMapのカスタマイズ

左側にカスタム用のツールがたくさんあって、そこでマップのデザインをいろいろと変更することができます。
たとえば「Invert lightness」というところにチェックを入れるとマップの色が反転します。

GoogleMapの色を反転

基本的な使い方としては

デザインを変える対象を選ぶ

GoogleMapカスタム対象

まずはデザインを変えたい対象を選びます。
Feature Typeでは、
道路のデザインを変えたかったら「Road」や川とか海のデザインを変えたかったら「Water」を選びます。
Element Typeでは、
Feature Typeで選んだものに対してラベルを変えたかったら「Labels」、塗りとかを変えたかったら「Geometry」を選びます。

デザインを変更する

GoogleMapのカスタマイズ

対象を指定したらデザインを変えましょう。
赤枠の部分のパラメータを触ってデザインを変更できます。
いろいろと触って試してみてね。
ここでは、YCOMのサイトカラーの緑にしてみました。

マップスタイルを追加する

触ってもらったらわかると思うけれど、このままでは道だけとか水の部分だけとか1つの対象に対してしかデザインが変更できない。
そこで、画面の右側でスタイルを追加しよう。
道のデザインが変更できたら、新しいスタイルを追加して次は水や区画の色を変更してみる。

マップスタイルを追加する

こんな感じでマップを自由にデザインしよう。
YCOMのカラーに合わせて変えてみたのがこちら。

GoogleMap

GoogleMapのカスタマイズ

マップのデザインデータをJSONで書き出す

マップのデザインが出来上がったので、このデザインをJSON形式で書き出します。
これは後ほどGoogleAPIと共に使います。

JSONで書き出し

json

GoogleMapに適用する

まずはこちらのコードを使ってGoogleMapをホームページに表示させます。
自由にカスタマイズしたければGoogleMap APIを使ってワンランク上のマップ表示を覚えよう

スクリプトの最後の当たりにJSONコードを利用した設定を入れます。
少し難しいスクリプトが入っていますが、まずはそのまま使ってください。

<script type="text/javascript">
/* map */
function initialize() {
	var latlng = new google.maps.LatLng(35, 135);
	var myOptions = {
		zoom: 10,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById('map'), myOptions);

	// マーカーの設定
	var marker = new google.maps.Marker({
		position: latlng,
		map: map
	});

	/* この位置に先ほどのJSONデータを使った命令を入れます */
	var samplestyle = [
		{
			"featureType": "road",
			"stylers": [
				{ "hue": "#22ff00" },
				{ "saturation": -45 },
				{ "gamma": 1.53 }
			]
			},{
			"featureType": "landscape",
			"stylers": [
				{ "hue": "#00ff19" }
			]
			},{
			"stylers": [
				 { "visibility": "simplified" }
			]
		}
	];

	var samplestyleOptions = {
	    name: "サンプル"
	};

	var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
	map.mapTypes.set('sample', sampleMapType);
	map.setMapTypeId('sample');
}
</script>

マップのデザインに自信がない人は、
Snazzy Maps」にかっこいいデザインが紹介されているので参考にするといいですよ。