GoogleMapのカスタマイズは難しくない！マップのデザインをカスタマイズする方法 #2 表示編

皆さんこんにちは！Yapinです。

今回は「マップのデザインをカスタマイズする方法#2　表示編」ということで、
・Google Mapを埋め込みたいけど、いつものデザインではなくてサイトのデザインに合わせたい。
・自分の店の場所にオリジナル画像を表示したい
という方に向けてマップを表示するために「マップのデザインをカスタマイズする方法#1　準備編」で取得したAPIキーを使ってマップを表示するためのコーディングについての記事になります。

サイトへのマップの表示方法
1. 　APIキーの読み込み
2. 　マップを表示する場所へのHTMLの書き方
3. 　マップを表示する為のJavaScriptの書き方
4. 　コードサンプル
カスタマイズ例
1. 　任意の場所にマーカーを表示する
2. 　マーカーをオリジナル画像にする方法
最後に

1.サイトへのマップの表示方法

1.APIキーの読み込み

以下のコードをhtmlファイルの<body>の終了タグの直前に記述します。「取得したAPIキー」の箇所は、ご自身で取得されたAPIキーをコピペしてください。

<script async src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー&callback=initMap"></script>

2.マップを表示する場所へのHTMLの書き方

マップを表示したい場所に<div>タグを記述します。その<div>タグにid属性を指定します。このid属性で指定した名前を次に説明する項目で使用します。

<div id="map"></div>

3.マップを表示する為のJavaScriptの書き方

マップを表示する処理のJavaScriptを記述します。以下はマップを表示するhtmlファイル内に記述する時の内容です。記述する場所はAPIキーの読み込みで記述したコードの直前に記述してください。

<script>
function initMap() {
   var opts = {
       center: new google.maps.LatLng(34.7024854, 135.4937619),
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   var map = new google.maps.Map(document.getElementById('map'), opts);
}
</script>

もちろんJavaScriptを別ファイルに記述することも可能です。その時は「任意の名前.js」というファイルを作成し、上記のコードから<script>タグを削除したものを記述してください。
そして、APIキーの読み込みで記述したコードの直前で作成したファイルを読み込むようにしてください。

それではJavaScriptのコードの内容を解説します。

center: new google.maps.LatLng(34.7024854, 135.4937619)

これはマップの中心座標を設定しています。LatLngクラスに緯度と経度を入力して取得した座標を設定しています。ここでは
・緯度：34.7024854
・経度：135.4937619
となっています。
この項目は必須項目です。

zoom: 15

これはマップの縮尺値を設定しています。指定できる数値は0～21となります。
この項目は必須項目です。

mapTypeId: google.maps.MapTypeId.ROADMAP

これは表示する地図の種類を設定しています。設定できるものは以下になります。

google.maps.MapTypeId.ROADMAP：通常の地図
google.maps.MapTypeId.SATELLITE：航空写真
google.maps.MapTypeId.HYBRID：航空写真に地名などを重ねて表示
google.maps.MapTypeId.TERRAIN：地形

この項目は任意項目です。
設定を省略した場合、デフォルトで設定されるのはgoogle.maps.MapTypeId.ROADMAPになります。

他にもオプションで設定できる項目がたくさんあります。ここでの説明は割愛させていただきますので、公式サイトのリンクを紹介します。
Google Maps Platform – MapOptions interface

var map = new google.maps.Map(document.getElementById('map'), opts);

こちらがマップを作成している記述になります。
document.getElementById(‘map’)でid=”map”を設定した要素を取得しています。optsは先程設定したオプションを入力した変数名です。
Mapクラスにこの2つを設定することで、マップを作成しています。

4.コードサンプル

以下は一つのHTMLファイルのみで記述した場合です。
またマップを表示するためにはCSSで高さを指定してあげないと表示されません。
なので、<style>タグ内でウィンドウの高さとマップの幅と高さを指定しています。
（h1はサンプルページの見出しとして設定しただけなので、h1タグが不要ならスタイル指定も不要です。）

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>サンプルマップ</title>
		<link rel="stylesheet" href="../css/destyle.css" />
		<style>
			html {
				height: 100%;
			}

			body {
				height: 100%;
			}
			.sample h1 {
				margin: 10px;
			}

			#map {
				margin-left: 10px;
				width: 80%;
				height: 90%;
			}
		</style>
	</head>
	<body class="sample">
		<h1>サンプルマップ（大阪駅を中心に設定しています）</h1>
		<div id="map"></div>
		<script>
			function initMap() {
				var opts = {
					center: new google.maps.LatLng(34.7024854, 135.4937619),
					zoom: 15,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
				};
				var map = new google.maps.Map(document.getElementById('map'), opts);
			}
		</script>
		<script
			async
			src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー&callback=initMap"
		></script>
	</body>
</html>

またhtml・CSS・JavaScriptを別々のファイルで記述しても大丈夫です。
コードの管理の面から1つのファイルで全部記述するよりもそれぞれのファイルで記述するほうが管理しやすいでしょう。
以下はhtml・CSS・JavaScriptを別々のファイルで記述した時のコード例です。
ファイル名は任意です。

index.html

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>サンプルマップ</title>
       <link rel="stylesheet" href="./css/style.css" />
   </head>
   <body class="sample">
       <h1>サンプルマップ（大阪駅を中心に設定しています）</h1>
       <div id="map"></div>
       <script src="./js/map.js"></script>
       <script
           async
           src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー&callback=initMap"
       ></script>
   </body>
</html>

style.css（「css」ディレクトリ内に配置）

html {
 height: 100%;
}
body {
 height: 100%;
}
.sample h1 {
 margin: 10px;
}#map {
 margin-left: 10px;
 width: 80%;
 height: 90%;
}

map.js（「js」ディレクトリ内に配置）

function initMap() {
   var opts = {
       center: new google.maps.LatLng(34.7024854, 135.4937619),
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   var map = new google.maps.Map(document.getElementById('map'), opts);
}

上記サンプルコードで作成したページのリンクを貼っておきますので、実際の表示はこちらからご確認ください。
GoogleMapAPIキーを使ったサンプルマップの表示例

2.カスタマイズ例

ここからはマップのカスタマイズ例を説明します。
APIキーを使用したGoogleMapの表示処理では色々なカスタマイズをすることができます。
その中から今回はピン（マーカー）の表示に関するカスタマイズを説明します。
GoogleMapでは検索した場所に下図のようなピン（マーカー）が表示されます。

なおこの名称に関して、ここではマーカーで統一させていただきますので、「ピン＝マーカー」と思っていただければ幸いです。

1.任意の場所にマーカーを表示する

前項のサンプルマップではマーカーが表示されていません。なぜならマップの表示処理とは別にマーカーの表示処理を記述しなければならないからです。
といっても、少しコードを追加するだけで表示できます。以下がその内容になります。

var markerOpts = {
    map: map,
    position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
}
var marker = new google.maps.Marker(markerOpts)

それではコードについて解説します。

var markerOpts = {
    map: map,
    position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
}

これはマーカーを表示するためのオプションを設定して変数markerOptsに入れています。

map: map

これはマーカーを表示するマップを指定しています。
前項で説明したマップを作成しているコードで

var map = new google.maps.Map(document.getElementById('map'), opts);

というのがあったと思います。ここでは、この時の変数mapを指定しています。

position: new google.maps.LatLng(34.70248469116547, 135.4959498625208)

これはマーカーを表示する座標を設定しています。LatLngクラスに緯度と経度を入力して取得した座標を設定しています。前項でマップ作成時の中心座標を設定していましたが、それと設定の方法は同じです。ただし、マップ作成時はcenterに設定していたものをマーカー表示時はpositionに設定するので、この違いには注意が必要です。

var marker = new google.maps.Marker(markerOpts)

そして先程オプション設定をした変数markerOptsをMarkerクラスに指定することで、マーカーが表示されるようになります。

以下はマーカー表示処理を追加したJavaScriptのコードサンプルになります。

function initMap() {
   var opts = {
       center: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   var map = new google.maps.Map(document.getElementById('map'), opts);

   // ↓ここから
   var markerOpts = {
       map: map,
       position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
   }
   var marker = new google.maps.Marker(markerOpts)
   // ↑ここまでがマーカー表示処理の記述

上記サンプルコードで作成したページのリンクを貼っておきますので、実際の表示はこちらからご確認ください。
マーカー表示のサンプル

2.マーカーをオリジナル画像にする方法

先程のマーカーは、GoogleMapのデフォルトのものでした。このままでは普通にGoogleMapを表示させるのと何も変わりはありません。
なので、ここでは表示させるマーカーをオリジナル画像に変更する方法を説明します。
といっても難しいことをする必要はなく、先程のマーカーを表示するためのオプション設定に追記するだけとなります。その内容は以下の通りです。

var markerOpts = {
       map: map,
       position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
       icon: '../image/marker-icon.jpg',
   }

こちらを見ると

icon: '../image/marker-icon.jpg'

が追記されています。

iconという項目に対して、マーカーにしたい画像のファイルパスを指定するとマーカー画像を変更することが出来ます。
しかし、このままだと画像サイズがそのままで表示されてしまうので、大きい画像だとマーカー周辺の地図が見えなくなる恐れがあります。
それを防ぐために、画像の縦横サイズを指定します。その分を追加した内容は以下の通りです。

var markerOpts = {
       map: map,
       position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
       icon: {
           url: '../image/marker-icon.jpg',
           scaledSize: new google.maps.Size(50, 50)
       },
   }

iconという項目の中でurlとscaledSizeという項目を設定しています。
urlは先程の画像のファイルパスと同じです。
そしてscaledSize: new google.maps.Size(横サイズ, 縦サイズ)という指定をすることで、マーカー画像のサイズ指定できます。サンプルコードでは横も縦も50pxで指定していることになります。

以下はマーカーをオリジナル画像で表示する設定を追加したJavaScriptのコードサンプルになります。

function initMap() {
   var opts = {
       center: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   var map = new google.maps.Map(document.getElementById('map'), opts);
   var markerOpts = {
       map: map,
       position: new google.maps.LatLng(34.70248469116547, 135.4959498625208),
       // ↓ここから
       icon: {
           url: '../image/marker-icon.jpg',
           scaledSize: new google.maps.Size(50, 50)
       },
       // ↑ここまでがオリジナル画像を表示する設定の記述
   }
   var marker = new google.maps.Marker(markerOpts)
}

上記サンプルコードで作成したページのリンクを貼っておきますので、実際の表示はこちらからご確認ください。
マーカーをオリジナル画像に変更したマップのサンプル

3.最後に

今回は「マップのデザインをカスタマイズする方法#2」ということで
・GoogleMapsAPIを使ったマップの表示方法
・マーカーの表示とマーカーをオリジナル画像に変更する方法
についてご紹介しました。

HTMLやCSS、JavaScriptの書き方を少し知っていれば、すぐに実践できると思います。
マップを自分好みのデザインやサイトの雰囲気にあったデザインにカスタマイズできると、デフォルトのマップを表示させて一部分だけ雰囲気が合っていないサイトという事になりません。
カスタマイズ例はたくさんありますし、JavaScriptの理解を深めれば色々なカスタマイズが可能になります。

次回からは色々なカスタマイズ例をご紹介します。