Google Maps API (2/4)
作成:2010-04-26 10:33
更新:2010-05-11 15:37
更新:2010-05-11 15:37
■コントロールの表示を修正する
単にMapオブジェクトを作っただけだと、ナビゲーションのコントロール類が「+」「-」のボタンだけのシンプルなものしか表示されません。またマップの切り替えもボタンで切り替える形になります。
こうしたコントロール類の表示は、オプション設定の配列に、そのための値を用意しておくことで修正することができます。では、それぞれの設定方法を整理しておきましょう。
1.ナビゲーション・コントロール
navigationControl: 真偽値で表示をON/OFFする
navigationControlOptions: 配列にstyleを用意して表示スタイルを変更する
拡大・縮小・移動などの操作をまとめたナビゲーション・コントロール(マップの左側に表示されるコントロール)は、navigationControlで表示をON/OFFできます。またコントロールの種類は、navigationControlOptionsという値を使います。これは、コントロールの表示に関する設定を配列でまとめたものを用意するのですが、この配列に「style」という項目を用意することでスタイルを変更できます。設定する値は、以下のいずれかです。
google.maps.NavigationControlStyle.SMALL ――横長のバー(デフォルトのもの)
google.maps.NavigationControlStyle.ZOOM_PAN ――ドロップダウンメニュー
google.maps.NavigationControlStyle.ANDROID ――Android用
2.マップタイプ・コントロール
地図のタイプを切り替えるコントロール(右上に表示されるもの)も、やはり表示のON/OFFを指定するオプションと、スタイルを設定するオプションが用意されています。
mapTypeControl: 真偽値で表示をON/OFFする
mapTypeControlOptions: 設定をまとめた配列を指定する
mapTypeControlOptionsでは、例によって「style」という値を用意します。これは、以下のいずれかの値を指定します。
google.maps.MapTypeControlStyle.HORIZONTAL_BAR――横長のバー(デフォルトのもの)
google.maps.MapTypeControlStyle.DROPDOWN_MENU――ドロップダウンメニュー
3.スケール・コントロール
マップの下に表示される、スケール(地図上の距離を表示したものさしのようなもの)をON/OFFします。
とりあえず、この3つのコントロールの使い方がわかれば、マップの表示はある程度整えることができるでしょう。以下に簡単な利用例をあげておきます。先のサンプルのオプション設定配列(変数options)を、このように書き換えてみてください。コントロールの表示が変わります。
こうしたコントロール類の表示は、オプション設定の配列に、そのための値を用意しておくことで修正することができます。では、それぞれの設定方法を整理しておきましょう。
1.ナビゲーション・コントロール
navigationControl: 真偽値で表示をON/OFFする
navigationControlOptions: 配列にstyleを用意して表示スタイルを変更する
拡大・縮小・移動などの操作をまとめたナビゲーション・コントロール(マップの左側に表示されるコントロール)は、navigationControlで表示をON/OFFできます。またコントロールの種類は、navigationControlOptionsという値を使います。これは、コントロールの表示に関する設定を配列でまとめたものを用意するのですが、この配列に「style」という項目を用意することでスタイルを変更できます。設定する値は、以下のいずれかです。
google.maps.NavigationControlStyle.SMALL ――横長のバー(デフォルトのもの)
google.maps.NavigationControlStyle.ZOOM_PAN ――ドロップダウンメニュー
google.maps.NavigationControlStyle.ANDROID ――Android用
2.マップタイプ・コントロール
地図のタイプを切り替えるコントロール(右上に表示されるもの)も、やはり表示のON/OFFを指定するオプションと、スタイルを設定するオプションが用意されています。
mapTypeControl: 真偽値で表示をON/OFFする
mapTypeControlOptions: 設定をまとめた配列を指定する
mapTypeControlOptionsでは、例によって「style」という値を用意します。これは、以下のいずれかの値を指定します。
google.maps.MapTypeControlStyle.HORIZONTAL_BAR――横長のバー(デフォルトのもの)
google.maps.MapTypeControlStyle.DROPDOWN_MENU――ドロップダウンメニュー
3.スケール・コントロール
マップの下に表示される、スケール(地図上の距離を表示したものさしのようなもの)をON/OFFします。
とりあえず、この3つのコントロールの使い方がわかれば、マップの表示はある程度整えることができるでしょう。以下に簡単な利用例をあげておきます。先のサンプルのオプション設定配列(変数options)を、このように書き換えてみてください。コントロールの表示が変わります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※optionsを修正する var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE, scaleControl: true, navigationControl: true, mapTypeControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } };
※関連コンテンツ