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

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

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

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

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

基本的な使い方としては

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

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

デザインを変更する

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

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

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

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

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

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

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>