Google Maps API (2/4)

単にMapオブジェクトを作っただけだと、ナビゲーションのコントロール類が「＋」「－」のボタンだけのシンプルなものしか表示されません。またマップの切り替えもボタンで切り替える形になります。

こうしたコントロール類の表示は、オプション設定の配列に、そのための値を用意しておくことで修正することができます。では、それぞれの設定方法を整理しておきましょう。


１．ナビゲーション・コントロール
navigationControl: 真偽値で表示をON/OFFする
navigationControlOptions: 配列にstyleを用意して表示スタイルを変更する

拡大・縮小・移動などの操作をまとめたナビゲーション・コントロール（マップの左側に表示されるコントロール）は、navigationControlで表示をON/OFFできます。またコントロールの種類は、navigationControlOptionsという値を使います。これは、コントロールの表示に関する設定を配列でまとめたものを用意するのですが、この配列に「style」という項目を用意することでスタイルを変更できます。設定する値は、以下のいずれかです。

google.maps.NavigationControlStyle.SMALL ――横長のバー（デフォルトのもの）
google.maps.NavigationControlStyle.ZOOM_PAN ――ドロップダウンメニュー
google.maps.NavigationControlStyle.ANDROID ――Android用


２．マップタイプ・コントロール
地図のタイプを切り替えるコントロール（右上に表示されるもの）も、やはり表示のON/OFFを指定するオプションと、スタイルを設定するオプションが用意されています。

mapTypeControl: 真偽値で表示をON/OFFする
mapTypeControlOptions: 設定をまとめた配列を指定する

mapTypeControlOptionsでは、例によって「style」という値を用意します。これは、以下のいずれかの値を指定します。

google.maps.MapTypeControlStyle.HORIZONTAL_BAR――横長のバー（デフォルトのもの）
google.maps.MapTypeControlStyle.DROPDOWN_MENU――ドロップダウンメニュー


３．スケール・コントロール
マップの下に表示される、スケール（地図上の距離を表示したものさしのようなもの）をON/OFFします。

とりあえず、この３つのコントロールの使い方がわかれば、マップの表示はある程度整えることができるでしょう。以下に簡単な利用例をあげておきます。先のサンプルのオプション設定配列（変数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 }
};