マルティスープ
Staff Blog

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置いたりすることはありませんか？

本ブログのサンプルでも、よく使用する方法ですが、最近になって、人から言われたことがあります。

この地図の最大化とは、オプションで用意されているフルスクリーンコントールのことです。確かに最大化すると消えてしまいます。今まで、検索用テキストボックスは、CSSで位置を固定して表示していましたが、この方法では消えてしまうようです。

色々調査してみたところ、カスタムコントロールという機能があることを知りましたので、説明いたします。

カスタムコントロールは、Googleマップの標準コントロールと同様に、位置を指定して地図上に表示することができます。指定できる位置は、Googleマップの解説ページ を参考にしてください。

設定方法は、至って簡単です。

map.controls[位置].push(div要素);

以下は、search-box という div 要素を取得して、右上に設定した例です。

var map = new google.maps.Map(document.getElementById("map"), {
     zoom : 10,
     center: new google.maps.LatLng(),
     mayTypeId: google.maps.MapTypeId.ROADMAP,
     fullscreenControl: true
 });
 var box = $('#search-box')[0];
 box.index = 1;
 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(box);

以下サンプルのサイトです。

なお、ブログ上では、iFrame で表示しているため、フルスクリーンコントロールは表示されません。下部の「Full Screen」をクリックして、サンプルページを単独で表示してください。検索テキストボックスの下に、フルスクリーンコントロールが表示されます。

Full Screen

このようにカスタムコントロールを使用すれば、地図をフルスクリーン表示にしても検索ボックスは消えません。また、地図と連動しているため、細かい表示位置など気にすることも無いです。

今回お客さまに指摘されて初めて使用しましたが、以外と便利な機能ですね。

これからも気付いたことがあれば、本ブログに記載していきたいと思います！！

なお、Googleマップのオプションについては、以下のブログでも解説していますので、是非ご覧ください。

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

表示位置のことも解説しています！

では、今日はこの辺で。

バイ！