GoogleMapをカスタマイズしたい！
ウェブサイト構築時には、なにかと地図を設置したいものです。
もっとも簡単な方法は「GoogleMap」で検索した地図をiframeで埋め込む方法だと思いますが、カスタマイズに限界があり、地図にこだわりたいときには不向きです。
そこで今回は、【Google Maps API】の「Maps JavaScript API」を使ってリッチな表現やカスタマイズが出来る地図の設置方法をご説明します。
初期設定
APIキーを取得する
【Google Maps API】を使用するには、「APIキー」の取得が必要です。
キーの取得は以下から。
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
一部英語ですが、恐らくそんなに難しくないと思われるので、詳細は割愛します。
サイトに設置する
まず地図を呼び出すためのJavascriptを設置します。
<script async defer src='//maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=loadedGoogleMap'></script>
[取得したAPIキー] となっている部分を、上記で取得したAPIキーに変えて、HTMLに記述してください。
基本設定
地図を実際に表示するには【呼び出しコード】を記述する必要があります。
以下がサンプルです。
<script type="text/javascript">
var loadedGoogleMap = function(){
function initialize() {
/*マーカーの位置（＝所在地）*/
var myLatlng = new google.maps.LatLng(35.690207,139.731594);
var mapOptions = {
center: myLatlng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('YOUR_MAP_ID'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=loadedGoogleMap'></script>
基本的には上記をコピペするのですが、サイトによって3か所変更する必要があります。
緯度経度
4行目のnew google.maps.LatLngに地図の中心となる緯度経度を入力します。
ズーム
7行目のzoomにズームの値を入力します。
地図を表示するID
地図を表示させたい場所のHTMLタグにIDを設定し、それを記入することで、その個所に表示が出来ます。
9行目、YOUR_MAP_IDを設置するIDに変えてください。
緯度経度とズームの取得
どういう方法でも取得できますが、GoogleMapで検索した場合のURLがヒントになります。
https://www.google.com/maps/place/株式会社クインテット/@35.690207,139.731594,15z/
「株式会社クインテット」という名称でGoogleMapを検索した場合上記のようなURLになりますが、この@以下が順に【緯度】【経度】【ズーム】になりますので、これらをコピペすればOKだと思います。
以上が設定出来れば、実際に地図が表示されるはずです。
が、これだけではマーカーも表示されず、iframeの埋め込みよりも使えません・・・。
なので、これからカスタマイズする必要があります。
マップ上に情報を追加する
マーカー設置
マーカーを設置するには、【呼び出しコード】の8行目と9行目の間にコードを追加すればOK。
以下のようになります。
<script type="text/javascript">
var loadedGoogleMap = function(){
function initialize() {
/*マーカーの位置（＝所在地）*/
var myLatlng = new google.maps.LatLng(35.690207,139.731594);
var mapOptions = {
center: myLatlng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('YOUR_MAP_ID'),mapOptions);
/*/↓↓ 追加したコード*/
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '株式会社クインテット',
icon: 'img/common/icon_map_marker.svg'
});
/*↑↑ 追加したコード*/
}
google.maps.event.addDomListener(window, 'load', initialize);
};
</script>
はい、表示されました。
15行目のtitleは、マーカーをオンマウスした時に表示されるテキストになるので、場所の名称などに変えると良いでしょう。
マーカーをカスタマイズ
マーカーは画像を指定する事も可能です。
まず画像を作ります。
画像は座標の上に刺さるように表示されるので、画像の下の方をとがらせるといいと思います。
【呼び出しコード】は、画像のパスを指定してあげればOK。
実際にはこういうコードになります。
<script type="text/javascript">
var loadedGoogleMap = function(){
function initialize() {
/*マーカーの位置(=所在地) */
var myLatlng = new google.maps.LatLng(35.690207,139.731594);
var mapOptions = {
center: myLatlng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('YOUR_MAP_ID'),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '株式会社クインテット',
/*↓ 追加したコード*/
icon: 'img/common/icon_map_marker.svg'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
};
</script>
14行目にicon: '画像のパス'という感じの一文を追加すればOKです。
ほら、簡単でしょ？
操作の制御
mapOptionsにオプション設定を追加することで、様々な操作の制御が可能になります。
スクロールホイールを禁止する
通常は「スクロールホイール」で拡大縮小が可能ですが、scrollwheel: falseを設定すると、「スクロールホイール」が無効になり、「スクロールホイール」でのズームの変更が出来なくなります。
これを活用すれば、地図をページ中段に配置した際にスクロールを止めて意図せず拡大してしまったりするのを抑制することができます。（コントロールUIによる拡大縮小は有効のままです）
ドラッグを禁止する
「ドラッグ」で表示位置の移動が可能ですが、draggable: falseを設定すると、「ドラッグ」が無効になり、「ドラッグ」での横移動が出来なくなります。
なお「ドラッグ」禁止は、タッチデバイスでのピンチ操作も同時に禁止してしまうので、注意が必要。
クリックによる表示を禁止する
clickableIcons: falseを設定すると、「クリック」による情報の表示とそれに伴う移動を禁止することができます。
タッチデバイスでのクリック操作も同時に禁止してしまうので、注意が必要。
ダブルクリックによるズームを禁止する
disableDoubleClickZoom: trueを設定すると、「ダブルクリック」による拡大が禁止できます。
“disable”なので、trueで禁止になるので注意が必要
キーボードによる操作を禁止する
keyboardShortcuts: falseを設定すると、キーボードによる操作を禁止することができます。
ちなみにデフォルトでは、キーボードでは以下のよな操作ができます。
- 上矢印キー 上へ移動
- 下矢印キー 下へ移動
- 左矢印キー 左へ移動
- 右矢印キー 右へ移動
- PageDown 上へ3/4ページ移動
- PageUp 下へ3/4ページ移動
- Home 左へ3/4ページ移動
- End 右へ3/4ページ移動
- + ズームイン
- - ズームアウト
全てを設定した場合の記述例
var mapOptions = {
center: myLatlng,
zoom: 15,
styles: styles,
scrollwheel: false,
draggable: false,
clickableIcons: false,
disableDoubleClickZoom: true,
keyboardShortcuts: false
};
地図の色を変える
色を変えるには、まず【呼び出しコード】を以下のように書き換える必要があります。
<script type="text/javascript">
var loadedGoogleMap = function(){
function initialize() {
/*マーカーの位置（＝所在地） */
var myLatlng = new google.maps.LatLng(35.690207,139.731594);
/*↓↓ 追加したコード */
var styles = [
{
stylers: [
{ hue: "#337FF0" },
{ lightness: 0 },
{ saturation: 60 },
{ gamma: 1 },
{ invert_lightness: false},
{ visibility: "simplified"}
]
}
];
/*↑↑ 追加したコード */
var mapOptions = {
center: myLatlng,
zoom: 15,
/* ↓追加したコード */
styles: styles,
};
var map = new google.maps.Map(document.getElementById('YOUR_MAP_ID'),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '株式会社クインテット',
icon: 'img/common/icon_map_marker.svg'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
};
</script>
7～18行目で「色設定」を変数化して管理しやすくします。
24行目でmapOptionsに変数化した「色設定 styles」を指定します。
こんな感じ。 意外と簡単にできました！
単色の地図
色相【hue】
10行目のhueは色相になるので、地図全体がここで設定した色相になることで、単色の地図にすることができます。
カラーコードで指定しますので、この場合は、青っぽい色味になります。
※カラーコードは#6桁でないと反応しないようです
明度を調整【lightness】
11行目のlightnessでは、全体の明るさを調整することができます。
0が基準値で、「正の値（0～100）」で明るく、「負の値（0～100）」で暗くなります。
彩度を調整【saturation】
建物の色はデフォルトでは明るいグレーになっています。saturationは透過度を「正の値（0～100）」で指定します。
0が基準値で、「正の値（0～100）」で鮮やかに、「負の値（0～100）」でくすんでいきます。 値を「-100」にするとモノトーンになります。
コントラストを調整【gamma】
gammaでは、平たく言うとコントラストを変えることができます。
1.0を基準として、「0.01～1.0」で暗く、「1.0～10」で明るくすることができます。
ただし、かなり大きく変わるので、0.1～0.2の間で調整することをオススメします。
12行目のsaturationでは、全体の明るさを調整することができます。
0が基準値で、「正の値（0～100）」で明るく、「負の値（0～100）」で暗くなります。
色指定【color】
この例では使用していませんが、colorは色を直接指定できます。
ただし、全て同じ色になるので地図が見えなくなります。後半で開設する「パーツごとのカラーカスタマイズ」での試用をオススメします
色の反転【invert_lightness】
invert_lightnessに【ture】を指定すると色が反転します。
色の反転【visibility】
visibilityは、地図上の要素の表示を切り替えます。
【on】は表示（デフォルト）。
【off】は非表示。
【simplified】を指定すると、部分的に簡易表示になります。
全体のスタイル指定で【off】を設定すると何も表示されなくなります
その他の詳細設定
実はもっと細かく設定できます。
詳細は、公式ドキュメントをご覧ください。
パーツごとのカラーカスタマイズ
地図を構成するパーツ（featureType）毎にも色を変更することができます。
基本的には【featureType】というパーツの分類（道路、建物、河川・海など）と、【elementType】というパーツを構成する要素（実体とラベル）を指定し、それに「単色の地図」と同じようなstylersという色設定を組み合わせてカスタマイズします。
var styles = [
{
stylers: [
{ hue: "#337FF0" },
{ lightness: 10 },
{ saturation: 60 },
{ gamma: 0.9 },
{ invert_lightness: false},
{ visibility: "simplified"}
]
}
,{
featureType: "featureType",
elementType: "elementType",
stylers: [
{ hue: "#ff0000" }
]
}
,{
featureType: "featureType",
elementType: "elementType",
stylers: [
{ hue: "#ff0000" }
]
}
];
分類【featureType】
分類には、以下の6種類があり、全てを選択する場合はallとなります。
境界線【administrative】
administrativeは国境や県境など、境界線のスタイルが変更されます。
境界線ごとに以下のように分類されています。
- administrative.country（国境）
- administrative.province（県境・州境）
- administrative.locality（区町村）
- administrative.land_parcel（？）
- administrative.neighborhood（？）
土地【landscape】
陸上、と言い換えても良いかもです。
分類は以下。
- landscape.man_made（人工建造物 ※zoomが9以上でないと表示されません）
- landscape.natural（自然？埋立地も含まれてるけど？？man_made以外）
- landscape.natural.landcover（土地被覆？？ ※zoomが5以下でないと表示されません）
- landscape.natural.terrain（地形？？ ※zoomが12以下でないと表示されません）
施設・公共地・公園【poi】
商業施設や公園、病院、学校、皇居など、住宅地など以外ってことでいいと思います。
分類は以下。
- poi.attraction（施設 labesだけ？ ※zoomが12以上でないと表示されません）
- poi.business（商業施設、警察など官公庁系 ※zoomが10以上でないと表示されません）
- poi.government（役所、大使館 なぜこれに警察が含まれない・・・？ ※zoomが12以上でないと表示されません）
- poi.medical（病院 ※zoomが12以上でないと表示されません）
- poi.park（公園 ※zoomが5以上でないと表示されません）
- poi.place_of_worship（神社・仏閣 ※zoomが12以上でないと表示されません）
- poi.school（学校 ※zoomが12以上でないと表示されません）
- poi.sports_complex（競技場、スポーツセンター ※zoomが12以上でないと表示されません）
道路【road】
道路です。逆から読むとロードです。
分類は以下。
- road.arterial（高速を除く幹線道路 ※zoomが16以下でないと表示されません）
- road.highway（県道と高速道路 ※zoomが5～16まででないと表示されません）
- road.highway.controlled_access（高速道路のみ ※zoomが12以上でないと表示されません）
- road.local（上記以下の道路 ※zoomが13～16まででないと表示されません）
roadのうち、高速道路以外はデフォルトの配色が白に近いため、colorを設定しないと変わったように見えない場合があるようです。
公共交通機関【transit】
公共交通機関。電車、空港から船などなど。
分類は以下。
- transit.line（路線 ※zoomが8以上でないと表示されません）
- transit.station（駅 ※zoomが8以上でないと表示されません）
- transit.station.airport（空港のみ ※zoomが8以上でないと表示されません）
- transit.station.bus（バス停 日本では設定されてないかも）
- transit.station.rail（鉄道 日本では設定されてないかも）
河川・海面【water】
水。waterには分類はないみたいです。
分類の公式ドキュメント
https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja
要素【elementType】
形状【geometry】
面の塗りつぶし、とでも言えば良いでしょうか。
分類は以下。
- geometry.fill（背景色）
- geometry.stroke（罫線）
全体のスタイル設定でvisibilityを【off】や【simplified】に設定しているとgeometry.strokeが一部表示されないので、その場合は変更しても意味がありません。
文字情報【labels】
名称などのテキストの設定です。
分類は以下。
- labels.icon（アイコン）
- labels.text（テキスト）
- labels.text.fill（テキストの塗りつぶし）
- labels.text.stroke（テキストの罫線）
スタイル化マップ ウィザード
さすがはGoogle先生、詳細なカスタマイズが出来るツール「スタイル化マップ ウィザード」を公開してくれています。
https://mapstyle.withgoogle.com/
実装例
上記のコードは以下です。
<div id="footer_main_map"> </div>
<script type="text/javascript">
var loadedGoogleMap = function(){
function initialize() {
/*マーカーの位置（＝所在地） */
var myLatlng = new google.maps.LatLng(35.690207,139.731594);
var styles = [
{
stylers: [
{ hue: "#7b4f9b" },
{ lightness: 0 },
{ saturation: -100 },
{ gamma: 1 },
{ invert_lightness: false},
{ visibility: "simplified"}
]
}
];
var mapOptions = {
center: myLatlng,
zoom: 15,
styles: styles,
scrollwheel: false,
clickableIcons: false,
};
var map = new google.maps.Map(document.getElementById('footer_main_map'),mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '株式会社クインテット',
icon: 'img/common/icon_map_marker.svg?'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
};
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=[取得したAPIキー]&callback=loadedGoogleMap'></script>
まとめ
利用制限
フリーの【Google Maps API】には制限があり、公式ドキュメント曰く、「Free until exceeding 25,000 map loads per 24 hours（＝24時間で25,000回まで）」だそうです。
詳しくは以下。 https://developers.google.com/maps/documentation/javascript/usage?hl=ja （英語）
公式ドキュメント
上記はあくまでもごく一般的な用途に絞った内容になっていますが、地図上に図形を表示したり、画像を張り付けたり、様々な頃が出来ます。
それらの詳細については、以下の公式ドキュメントを見ていただければよいと思います。
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
まとめ
すっごーく長く書きましたが、色をちょっと変えるくらいなら、後半のほうは読まなくても出来るはずですので、気軽にチャレンジしてみてください。
けっこう簡単にできたので、実務でいろんなサイトに使ってみようかと思います！
= うしお =
