1-3. コントロールの追加

　Google Maps API v3ではコントロールの追加方法が、Google Maps API v2とは異なり あらかじめ用意されているものを有効／無効にする、という方法で指定します。 次のコードではmapTypeControl・scaleControl・navigationControl の3つのコントロールを 有効にしています。

var centerPos = new google.maps.LatLng(35.658613, 139.745525);
var mapOptions = {
  zoom : 18,
  center : centerPos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl : true,
  scaleControl : true,
  navigationControl : true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

コントロールの有効／無効を指定する方法
1-3_map1.html

各コントロールを表示した様子

Google Maps API v3 では、同じコードでiPhone や Android のようなモバイル端末上のブラウザ、すなわち 小さい画面でのGoogle マップの表示についても動作するように設計されています。 そのため、コントロールの表示には工夫がされています。 例えば、先ほどのコードをiPhone 上で表示させると下図のようになります。

Desktop iPhoneで表示したときの様子

デフォルトのユーザインタフェース

Map Options で何もコントロールを指定しなかった場合には、デフォルトのユーザインタフェースが適用されます。 表示されるコントロールは、画面サイズと表示するデバイスによって異なります。 なお、全てのデバイスでキーボードによる操作をサポートしています。

デフォルトのユーザインタフェース

表示サイズ／デバイス	ナビゲーションコントローラ	マップタイプコントローラ	スケールコントローラ
大きいスクリーン	地図サイズが 400x350px 以上のとき、大きいサイズのパン／ズームコントローラ	地図サイズが 320px 以上のとき、横長のマップタイプコントローラ	表示されない
小さいスクリーン	地図サイズが 400x350px 未満のとき、小さいサイズのパン／ズームコントローラ	地図サイズが 320px 未満のとき、折りたたみ式のマップタイプコントローラ	表示されない
iPhone	表示されない	大きいスクリーン／小さいスクリーンと同じ	表示されない
Android	Androidコントローラ	大きいスクリーン／小さいスクリーンと同じ	表示されない

デフォルトのユーザインタフェースを無効にするには

デフォルトのユーザインタフェースが自動で読み込まれるのを無効にするには、Map Options の disableDefaultUI プロパティを true にします。

var centerPos = new google.maps.LatLng(35.658613, 139.745525);
var mapOptions = {
  zoom : 18,
  center : centerPos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI : true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

1-3_map2.html

スタイルの変更

各コントロールにはそれぞれ、スタイルを指定するオプションが用意されています。

var centerPos = new google.maps.LatLng(35.658613, 139.745525);
var mapOptions = {
  zoom : 18,
  center : centerPos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl : true,
  mapTypeControlOptions : {
    style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
  navigationControl : true,
  navigationControlOptions : {
    style : google.maps.NavigationControlStyle.ANDROID
  },
  scaleControl : true,
  scaleControlOptions : {
    style : google.maps.ScaleControlStyle.DEFAULT
  }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

各コントロールにオプションを指定する方法
1-3_map3.html

各コントロールにオプションを指定した様子