Googlemapをカスタマイズしてみる。

※リンク等一部更新しました（2019.08.17）
Googlemapのカスタマイズはだいぶ一般的になってきましたが、こちらも情報がだいぶ玉石混交で結局のところどうしたらいいの！？という声がありそうなので、私がわかる範囲でまとめてみました。なおいきなり完成形が見たいという方はこちらから。

通常の埋込み

googlemap上で、基準にしたい場所で右クリックし「この場所について」をクリックします。画面下に場所の情報が表示されるので、名前部分をクリックすることで画面左にその場所の情報が表示されます。この中の「共有」をクリックし、表示されたモーダルの中の「地図を埋め込む」をクリックします。ここに表示されるURLをHTML内に記述すれば、通常のgooglemapを埋め込むことができます。

HTMLファイル

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.3702858675736!2d139.69039147608635!3d35.683389395024136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ccd569c53ff%3A0x45766e6cf1101880!2zVW5uYW1lZCBSb2FkLCDku6PjgIXmnKgg5riL6LC35Yy6IOadseS6rOmDvSAxNTEtMDA1Mw!5e0!3m2!1sja!2sjp!4v1525763812910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これは一番基本的なやり方ですね。サイズをCSSで変更したい場合には、ソースのwidthとheightを削除し、このiframeのサイズをcssで指定すれば変更可能です。

CSSファイル

iframe {
width:100%;
height:350px;
}

こんな形で指定すれば、レスポンシブ対応にもできますね。

APIキーを取得して地図を表示する

さて、表示をカスタマイズするためには、googlemap APIを取得してページ内に地図を表示する必要があります。取得はこちらから行うことができます。取得方法の詳細はまた別の機会にということで、こちらではAPIキーを取得した後の流れを説明していきます。まずは細かいことは置いといて、一番シンプルな形から。

HTMLファイル

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>googlemap　テストページ</title>
<style>
#map_canvas {
	width: 100%;
	height: 350px;
}
</style>
</head>

<body>
<div id="map_canvas"></div>
<script async defer src="//maps.google.com/maps/api/js?key=ここに取得したAPIキーを記載&callback=initMap"></script>
<!-- googlemap -->
<script>
function initMap() {
	//表示したい緯度経度を指定
	var latlng = new google.maps.LatLng(34.676451, 135.498344);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16//画面の拡大率を指定
	});
	//マーカーの設定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map//マーカーを表示する地図をmap変数で指定した地図に設定
	});
}
</script>
</body>
</html>

通常の埋込とほとんど変わりませんが、これで一応表示される……はずです。一応ざっと説明すると、latlng変数に表示したい緯度経度を設定し、続いてmap変数に指定されたidの場所（この場合はmap_canvas）に、googlemapを表示する指定をしています。緯度経度がわからなかったり、ずれる場合には、こちらを利用して調べられます。その後のマーカーの設定では、marker変数にマーカーを生成し、表示する座標をlatlng変数、表示する地図をmap変数に指定しています。同一ページ内に複数のgooglemapを埋め込みたい場合には、こちらのページが参考になるかもですね。ちなみにAPIキーの後ろの&callback以下を記述せず、bodyタグにonload=”initMap();”を記載するというやり方もありますが、こちらの方がスマートだと思います。

見た目をカスタマイズする

さて、とりあえず表示されたものの、これだけでは埋め込みとほとんど変わりません。せっかくですから見た目を色々カスタマイズしていきましょう。見た目のカスタマイズには、 Google Maps Platform Styling Wizardや Google Maps Colorizr、 Styled Map Wizard などを使用するのが簡単だと思います。詳しくはこのあたりの解説を読むのがわかりやすいかもしれません。かいつまんで少しだけ説明すると、まずは変更したいFeature typeを選択します。 Administrative（行政区分）やLandscape（目印になる風景）、Road（道路）やTransit（交通網）などですね。次にこの変更したい部分のElement typeを選択します。これはGeometry（地図上の図）とLabels（名称）に分かれています。さらにGeometryはFill（ぬりつぶされる色面）とStroke（輪郭線）、LabelsはText（文字）とIcon（アイコン）に分かれています。この中から変更したいものを選ぶわけですね。ちなみに種類によっては選べないものもあったりします。さらにそれらについて表示の可否、色、色相、明度やガンマ値、線の太さなどを指定することで、自分の好みのスタイルに変更できるわけです。ちなみにこの変更を加えるとscriptの記述がだいぶ長くなるので別ファイルにしといた方が作業が楽だと思います。こんな感じですかね。

HTMLファイル

<div id="map_canvas"></div>
<script async defer src="//maps.google.com/maps/api/js?key=【APIキー入ります】&callback=initMap">"></script>
<script type="text/javascript" src="js/mapscript.js"></script>

JSファイル

function initMap() {
	//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(35.676167, 139.744837);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16//画面の拡大率を指定
	});
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map//マーカーを表示する地図をmap変数で指定した地図に設定
	});
}

さて、それはともかく今回はStyled Map Wizardを利用して見た目のカスタマイズをしてみましょう。

基本的に左側で変更したいFeature typeとElement typeを選び、Stylersを変更していきます。複数のスタイルを変更したい場合には、それぞれ右側のMap Styleのaddボタンを押して変更するスタイルを複数用意していきます。今回は細かく色々な箇所を変更しているので、Styleを16用意してみました。完成したら右側のShow JSONボタンをクリックしてソースを表示してコピーし、現在のスクリプトに書き加えていきます。こんな形にすれば問題ありません。

JSファイル

function initMap() {
	//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(35.676167, 139.744837);
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,//地図の中心を指定した緯度経度に設定
		zoom: 16,//画面の拡大率を指定
		styles: [//スタイルのカスタマイズは、styles: の後ろにコピーした[]の中身を全てペーストする
		{
			"featureType": "landscape",
			"elementType": "geometry",
			"stylers": [{
				"color": "#c5c5c5"
			}]
		}, {
			"featureType": "landscape",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#a3a3a3"
			}]
		}, {
			"featureType": "transit",
			"elementType": "labels.icon",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#787878"
			}, {
				"weight": 4
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.stroke",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.park",
			"stylers": [{
				"visibility": "off"
			}]
		}, {}, {
			"featureType": "poi.business",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.attraction",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.medical",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.place_of_worship",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.government",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "administrative",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "water",
			"stylers": [{
				"visibility": "on"
			}, {
				"color": "#888888"
			}]
		}, {
			"stylers": [{
				"saturation": -100
			}]
		}]
	});
	//マーカーの指定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map
	});
}

これで見た目を変更することができました！

マーカーをSVG画像に変更する

さて、続いてはこのマーカーを変更してみましょう。マーカーはpng画像を使うやり方などもありますが、レスポンシブやRatina対応が当たり前になっている今はSVGを使用する方が良いでしょう。こちらは簡単です。以下の記述を追加すれば変更することができます（もちろんpngでもちゃんと表示されますよ）。

JSファイル

//マーカーの変更
	var markerImg = {
		url:'/img/mappoint.svg',//SVGアイコンのパスを記述（ルート相対パスにしています）
		scaledSize : new google.maps.Size(122,140)//アイコンサイズ
	};
	//マーカーの指定
	var marker = new google.maps.Marker({
		position: latlng,//マーカーの座標をlatlng変数と同じにしています
		map: map,//マーカーを表示する地図をmap変数で指定した地図に設定
		icon: markerImg//マーカーをmarkerImg変数で指定したSVG画像に設定
	});

スクロール制御や細かな調整など

大体良くなってきましたが、現状スマホサイズで見た場合、スクロールすると地図が拡大縮小してしまいます。このあたりも制御し、ついでに画面上の余計なものも消してみましょう。これは以下の箇所を修正すれば対応できます。

JSファイル

var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,
		zoom: 16,
		disableDefaultUI: true,//コントロール非表示
		zoomControl: true,//ズームコントロール表示
		scaleControl: true,//スケールコントロール表示
		scrollwheel: false,//スクロールでズームされるのを無効
		styles: [//スタイルのカスタマイズは、styles: の後ろにコピーした[]の中身を全てペーストする

これで見た目は以下のように変わったかと思います。

アイコンをクリックしてリンクを開けるようにする

最後にもう一つ、アイコンをクリックしてリンク先を表示できるようにしましょう。 googlemap自体に移動するようにしてもいいですし、別サイトを設定することも可能です。こちらは以下を記述しましょう。

JSファイル

	google.maps.event.addListener(marker, 'click', function() {
		window.open("リンク先のパスをhttpから記述" );
	});

ちなみに同じウインドウで開くには、以下のように記述します。

JSファイル

	google.maps.event.addListener(marker, 'click', function() {
		location.href="リンク先のパスをhttpから記述";
	});

これで一通りカスタマイズできたかと思います。また、複数のマーカーを表示したければ、こちらのサイトが参考になるかと思います。調べればまだまだカスタマイズが可能です。皆さんも色々とやってみてください！！一応最後に最終型のコードも記載しておきますね。

完成形

HTMLファイル

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>googlemap　テストページ</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- 地図を表示したい箇所に以下の一行を記述 -->
<div id="map_canvas"></div>

中略

<!-- /bodyの直前に以下を記述 -->
<script async defer src="//maps.google.com/maps/api/js?key=ここに取得したAPIキーを記載&callback=initMap"></script>
<script type="text/javascript" src="js/mapscript.js"></script>
</body>
</html>

※パスやファイル名は適宜変更して使用してください。

CSSファイル（必要な箇所のみ）

#map_canvas {
	width: 100%;
	height: 350px;
}

※サイズは自分のお好みで調整してください。

JSファイル

function initMap() {
	//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(35.676167, 139.744837);//緯度経度は自分の使用したいものに変更してください
	//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		center: latlng,
		zoom: 16,
		disableDefaultUI: true,//コントロール非表示
		zoomControl: true,//ズームコントロール表示
		scaleControl: true,//スケールコントロール表示
		scrollwheel: false,//スクロールでズームされるのを無効
		styles: [//スタイルのカスタマイズは、styles: の後ろにコピーした[]の中身を全てペーストする
		{
			"featureType": "landscape",
			"elementType": "geometry",
			"stylers": [{
				"color": "#c5c5c5"
			}]
		}, {
			"featureType": "landscape",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "labels",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "road",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#a3a3a3"
			}]
		}, {
			"featureType": "transit",
			"elementType": "labels.icon",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.fill",
			"stylers": [{
				"color": "#787878"
			}, {
				"weight": 4
			}]
		}, {
			"featureType": "transit",
			"elementType": "geometry.stroke",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.park",
			"stylers": [{
				"visibility": "off"
			}]
		}, {}, {
			"featureType": "poi.business",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.attraction",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.medical",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.place_of_worship",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "poi.government",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "administrative",
			"stylers": [{
				"visibility": "off"
			}]
		}, {
			"featureType": "water",
			"stylers": [{
				"visibility": "on"
			}, {
				"color": "#888888"
			}]
		}, {
			"stylers": [{
				"saturation": -100
			}]
		}]
	});
	//マーカーの変更
	var markerImg = {
		url:'/img/mappoint.svg',//アイコンパス（ルート相対パスにしています）
		scaledSize : new google.maps.Size(122,140)//アイコンサイズ
	};
	//マーカーの指定
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: markerImg
	});
	google.maps.event.addListener(marker, 'click', function() {
		window.open("http://www.yahoo.co.jp/" );
	});
}