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

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

 

では、今日はこの辺で。

バイ!

 

 

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

2017.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します。<・・・

続きを読む

 - Google Maps JavaScript API

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

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

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

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