Snazzy MapsでGoogle Mapを簡単にカスタマイズ

Webサイトを制作する際に、Google Mapを埋め込んで地図を表示させることは多いと思います。
ただ埋め込むだけなら簡単に設置できると思いますが、案件によっては、マーカーのアイコンを独自のものに変えてほしい、マップをデフォルトのものでなくサイトのテイストに合わせた色に変更してほしいなどの要望も少なくありません。普通にやろうとすると、JavaScriptでカスタマイズできるのですが、けっこう大変ですし、知識がないと表示をさせるだけでも苦労します。そこで、今回紹介するSnazzy Mapsを使用して、簡単にGoogle Mapのカスタマイズをしていきたいと思います。

まずはSnazzy Mapsの公式サイトにアクセスします。
そしてヘッダーメニュー内にあるBUILD A MAPという項目をクリックしてください。そうすると、Google Mapのカスタマイズページに飛べるのでそこからカスタマイズしていきます。それでは、上から順番に、簡単な使い方を説明していきたいと思います。

1.STYLE

ここでは、マップの色などを変更することができます。スタイルは自分で作ることもできますし、世界中のユーザーが制作したスタイルの中から自由に選択することもできます。大量のスタイルが用意されていますが、検索機能もあるので、自分の好みに合わせたもので絞り込めます。
例えば、黒系でシンプルなものを人気順で表示したい、というときは右のような結果になります。

2.SIZE&LOCATION

次に、Webに埋め込む際のサイズと表示させたいマップ上の座標を入れます。ここは特に説明は必要ないかと思うので、任意の値を設定してください。

3.MARKERS

ここでは、マップ上にマーカー（ピン）を立てることができます。NAMEに立てたい場所の名前（会社名など）、LOCATIONにその座標を入力します。独自のマーカーを設定したい場合は、ICONの項目から下記のように変更できます。

Default Google Maps Marker

Google Mapで用意されているデフォルトのマーカーです。特に変える必要がない場合はそのままで大丈夫です。

Styled Marker

マーカーの見た目、色、大きさを変更して設置することができます。ですが、用意されたものの中から選択する形になっているので、自由度はそこまで高くはありません。

Custom Marker

マーカーを会社のロゴやアイコンに変更したいときは、ここから設定できます。設定の仕方ですが、まずはファイルをアップロードします。アップロードしたら、項目が出てくるので、そこからサイズなどを調整していきます。Anchor X CoordinateとAnchor Y Coordinateではマーカーの先端に座標（画像上にある×のアイコン）が来るように調整します。

4. Advanced Settings

最後にAdvanced Settingsですが、直訳すると高度な設定となります。この項目は、基本的にはLANGUAGEを日本語に変更するだけで問題ないかと思いますが、それ以外にUI部分を変更したいときは、下記の詳細メニューから変更できます。

Map Type

マップの種類を変更できます。衛星写真などに変更したいときはここから変更できます。

Controls

マップ上に表示されるコントロール部分（ストリートビューアイコンや拡大・縮小ボタンなど）の表示非表示を設定できます。非表示にすることで、マップをスッキリと見せることはできますが、その分UIは低下してしまいますので、注意してください。

Behavior

マップの動作に関係する項目を変更できます。Controlsと同様、動作を切ってしまうことで、UIが低下してしまうこともあるので、注意してください。

Panning

このチェックを外すと、マップを移動させることができず、最初に表示した場所以外は表示點せられなくなります。

Keyboard shortcuts

これはそのままですが、キーボードショートカット（+でズームなど）の有無を選択できます。

Double click to zoom

これもそのままですが、マップをダブルクリックすることで、その場所にズームが出来るようになる機能です。

Scroll to zoom

マップ上でスクロールでズームを切り替える項目です。マップがページの途中にある場合は、解除しておいたほうがストレスなくページを閲覧できるのでは無いかと思います。

Clickable points of interest

マップ上のマーカーをクリッカブルにするかどうかの項目です。解除すると、マーカーをクリックしても情報などが見れなくなります。

設定項目は以上になります。数はありますが、難しいことは無いと思うので、簡単に設定できると思います。マップのカスタマイズができたら、あとは保存をして、コードを書き出します。この工程にはユーザー登録（無料）が必要なので、予め登録しておくとスムーズに進めます。

フロッピーアイコンをクリックすると、右のようにメニューが出てくるので、マップ名とAPIキーを入力してSAVEをクリックしてください。あとはその下にあるView Codeのアイコンをクリックして、出力されたコードをマップを埋め込みたい部分にペーストをすれば完了です。

まとめ

今回紹介したSnazzy Mapsは上記で説明したように、とても簡単にGoogle Mapのカスタマイズをすることができます。用意された項目に値を入れていくだけなので、JavaScriptなどの知識がなくてもカスタマイズ可能なところもおすすめです。ぜひ参考にしてみてください。

• JavaScriptの組み合わせによってはWEBページに不具合を起こす可能性もあります。導入は自己責任でお願いします。
• WordPress 用 Snazzy Maps プラグインは、クロスサイトスクリプティングの脆弱性が確認されています。（2018/8）
  対処法や詳しい情報はこちらから Kyubi通信 | JVN iPedia

WEBプログラマー ／ K.S