前回に引き続き、Google Map APIについて。

今回は、UI関係です。

デフォルトのコントロールセットを表示させない。

 1. <script>
 2. $(document).ready( function(){
 3.   var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
 4.   var map = new google.maps.Map(
 5.     document.getElementById('map'),
 6.     {
 7.       zoom: 14,
 8.       center: latlng,
 9.       mapTypeId: google.maps.MapTypeId.ROADMAP,
10.       disableDefaultUI: true
11.     }
12.   );
13.   var marker = new google.maps.Marker({
14.     position: latlng,
15.     map: map,
16.     title: '天橋立'
17.   });
18. });
19. </script>

10行目
disableDefaultUIをtrueにするとデフォルトで表示されるコントロールセットを表示しない。

コントロールの表示を個別で指定することも出来ます。

 1. <script>
 2. $(document).ready( function(){
 3.   var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
 4.   var map = new google.maps.Map(
 5.     document.getElementById('map'),
 6.     {
 7.       zoom: 14,
 8.       center: latlng,
 9.       mapTypeId: google.maps.MapTypeId.ROADMAP,
10.       panControl: true,
11.       zoomControl: true,
12.       mapTypeControl: true,
13.       mapTypeControlOptions: {
14.         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
15.         position: google.maps.ControlPosition.TOP_RIGHT
16.       },
17.       scaleControl: true,
18.       streetViewControl: true,
19.       rotateControl: true,
20.       overviewMapControl: true
21.     }
22.   );
23.   var marker = new google.maps.Marker({
24.     position: latlng,
25.     map: map,
26.     title: '天橋立'
27.   });
28. });
29. </script>

10〜20行目
コントロールの表示/非表示を個別に設定するには、以下のプロパティで設定できます。
設定できる値はtrue（表示する）、false（表示しない）です。

・panControl
　移動コントロールを有効または無効のいずれかを指定します。
・zoomControl
　ズームコントロールを有効または無効のいずれかを指定します。
・mapTypeControl
　マップタイプ（地図や航空写真など）を切り替えるマップタイプコントロールを有効または無効のいずれかを指定します。
・scaleControl
　簡単な地図縮尺を表示するスケールコントロールを有効または無効のいずれかを指定します。
・streetViewControl
　ストリートビューを有効または無効にするペグマンを、表示または非表示のいずれかを指定します。
・rotateControl
　45度画像の向きをコントロールする回転コントロールの表示を有効または無効のいずれかを指定します。
　デフォルトではこのコントロールの表示は、現在表示されているズームと場所での指定されたマップタイプに45度画像があるかどうかで決まります。
・overviewMapControl
　概観マップを有効または無効のいずれかを指定します。
　概観マップコントロールは、完全に表示（サムネイル概観マップを表示）するか、折りたたんで最小化した状態で表示することができます。

また、13〜16行目のようにコントローラーのスタイルや表示位置なども指定出来ます。

Google Map APIを覚えるなら

Google Maps APIプログラミング入門 改訂2版 新品価格 ￥3,780から (2013/10/25 14:40時点)