MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.11.05

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

custom_control

みなさん、こんにちは。

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 でよく使う地図オプション

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

 

では、今日はこの辺で。

バイ!

 

 

【関連記事】こんな記事も読まれています

2016.08.26

国土地理院の地図でストリートビューを見る

みなさん、こんにちは!

前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で・・・

続きを読む

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、K・・・

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描画方・・・

続きを読む

 - Google Maps JavaScript API

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)