マルティスープ
Staff Blog

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは！

今回は、「JavaScript API でよく使う地図オプション」と題しまして、Google Maps JavaScript API の MapOptions（地図の初期設定） で設定できる様々なプロパティを抜粋してご紹介いたします！

サンプルでは、下記の3種類の切り替えができるようになっています。

1. コントロールの表示・非表示
2. コントロールの表示位置
3. 各種操作の有効・無効

「コントロール」とは、例えば通常は右下に「+」と「-」で表示されるズームボタンのような、マップを操作するUI部品のことです。

また、通常の地図を航空写真を切り替えるボタンは「マップタイプコントロール」、ストリートビューの表示に切り替えるボタンは「ペグマンコントロール」といいます。

(ちなみにペグマンとは、ストリートビューの表示で見られる、あの黄色い人型アイコンのことです！)

今回のサンプルで操作するコントロールを、下図にまとめました。

それでは、早速見ていきましょう！

この画面だと少し操作しづらいと思いますので、ぜひFull Screen の方でもお試しいただければと思います。

下部のパネル(FullScreen時は右側)で、各コントロールの表示・非表示 及び 表示時のマップ上での位置 を切り替えます。

さて、普段何気なく操作しているこれらのコントロール……実は、一部のものはデフォルトで無効(非表示)になっています。

例えば、マップのサイズが 200 x 200 ピクセル未満の場合、デフォルトではすべてのコントロールが非表示になりますし、全画面モードのコントロールも、PCではデフォルトで表示されません。

各コントロールについて、

「常に表示したい/したくない」

「表示位置を変えたい」

「切り替えを自身の(何らかの)タイミングで行うようにしたい」

といった場合には、マップの MapOptions オブジェクトで明示的に指定すれば大丈夫です！

1. コントロールの表示・非表示

各コントロールの表示・非表示の切り替えは、MapOptions にある ***Control といったプロパティで設定します。

表示するには true を、非表示にするには false を指定します。

2. コントロールの表示位置

各コントロールの表示位置は、MapOptions オブジェクト内の ***ControlOptions といったフィールドで指定します。

このとき、コントロール毎に対応する ***ControlOptions というタイプのオブジェクトを追加で指定するのですが、

基本的には position プロパティを設定し、表示位置を google.maps.ControlPosition で定義されている定数で設定すればOKです。

マップの作成時に指定する MapOptions オブジェクトで、最初に指定してしまっても良いですし、

作成したマップの setOptions メソッドを使って、新しい MapOptions オブジェクトを後から指定して動的に変更することもできます！

各オブジェクトの position プロパティに設定する、google.maps.ControlPosition の定数は下記の通りです。上下左右それぞれ4辺上を、更に3分割した、計12通りとなっています。

こちらは図で見た方が分かりやすいでしょう。

さらっと流してしまうと、TOP_RIGHT と RIGHT_TOP は同じ指定のように見えてしまいますね…。

また、BOTTOM_LEFT と BOTTOM_RIGHT も、Googleロゴや著作権表示をよけて表示されますので注意が必要です。

ところで、複数のコントロールを同じ位置に指定したらどうなるのでしょうか？

そこは、APIが調整してくれます。

これらの位置指定は絶対的なものではないのですが、それゆえ他のコントロールとの位置を考慮して、APIに最適な配置を任せることができます。表示位置が固定されたUI要素(著作権表示やGoogleロゴ)がある時も、指定した位置にできるだけ近い場所にずらして表示します。

3. 各種操作の有効・無効

下記の様な操作も、MapOptions 内の対応するプロパティを設定することで、有効・無効を切り替えることができます。

いずれもデフォルトでは有効(各操作ができる状態)になっています。

以上、Google Maps JavaScript API でよく使う地図オプションをご紹介いたしました。

次回の更新も楽しみにしてください！