Googleマップ-UIコントロール

Googleマップは、ユーザーが地図を操作できるようにするためのさまざまなコントロールを備えたユーザーインターフェースを提供します。これらのコントロールを追加、カスタマイズ、および無効にすることができます。

デフォルトのコントロール

これがGoogleマップによって提供されるデフォルトのコントロールのリストです-

Zoom−マップのズームレベルを増減するために、デフォルトで+ボタンと−ボタンのあるスライダーがあります。このスライダーは、マップの左側の隅に配置されます。
Pan −ズームスライダーのすぐ上に、マップをパンするためのパンコントロールがあります。
Map Type−このコントロールはマップの右上隅にあります。衛星、ロードマップ、地形などのマップタイプオプションを提供します。ユーザーはこれらのマップのいずれかを選択できます。
Street view−パンアイコンとズームスライダーの間に、ペグマンアイコンがあります。ユーザーはこのアイコンをドラッグして特定の場所に配置すると、ストリートビューを表示できます。

例

これは、Googleマップが提供するデフォルトのUIコントロールを観察できる例です-

UIのデフォルトコントロールを無効にする

Googleマップが提供するデフォルトのUIコントロールを無効にするには、 disableDefaultUI マップオプションの値はtrueです。

例

次の例は、Googleマップが提供するデフォルトのUIコントロールを無効にする方法を示しています。

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

次の出力が生成されます-

すべてのコントロールの有効化/無効化

これらのデフォルトのコントロールに加えて、Googleマップには以下に示す3つのコントロールも用意されています。

Scale− Scaleコントロールは、マップの縮尺要素を表示します。このコントロールはデフォルトでは有効になっていません。
Rotate− [回転]コントロールには、斜めの画像を含むマップを回転できる小さな円形のアイコンが含まれています。このコントロールは、デフォルトでマップの左上隅に表示されます。（詳細については、45°画像を参照してください。）
Overview−マップのズームレベルを増減するために、デフォルトで+ボタンと−ボタンのあるスライダーがあります。このスライダーは、マップの左隅にあります。

マップオプションでは、以下に示すように、Googleマップが提供するコントロールを有効または無効にできます。

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

例

次のコードは、すべてのコントロールを有効にする方法を示しています-

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

次の出力が生成されます-

制御オプション

コントロールオプションを使用して、Googleマップコントロールの外観を変更できます。たとえば、ズームコントロールのサイズを縮小または拡大できます。MapTypeコントロールの外観は、水平バーまたはドロップダウンメニューに変更できます。以下に、ZoomおよびMapTypeコントロールのコントロールオプションのリストを示します。

シニア番号	コントロール名	制御オプション
1	ズームコントロール	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapTypeコントロール	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

例

次の例は、制御オプションの使用方法を示しています-

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

次の出力を生成します-

位置決めの制御

コントロールオプションに次の行を追加することで、コントロールの位置を変更できます。

position:google.maps.ControlPosition.Desired_Position,

これは、コントロールをマップ上に配置できる利用可能な位置のリストです-

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

例

次の例は、MapTypeidコントロールをマップの上部中央に配置する方法と、ズームコントロールをマップの下部中央に配置する方法を示しています。

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

次の出力を生成します-