Google-maps-ui-controls

提供：Dev Guides
移動先:案内、検索

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

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

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

以下は、Googleマップが提供するデフォルトのコントロールのリストです-

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

例

Googleマップが提供するデフォルトのUIコントロールを確認できる例を次に示します-

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

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

例

次の例は、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つのコントロールも用意されています。

  • スケール-スケールコントロールは、マップスケール要素を表示します。 このコントロールはデフォルトでは有効になっていません。
  • 回転-回転コントロールには、斜めの画像を含むマップを回転できる小さな円形のアイコンが含まれています。 このコントロールは、デフォルトでマップの左上隅に表示されます。 （詳細については、45°画像を参照してください。）
  • 概要-マップのズームレベルを増減するには、＆plus;のスライダーがあります。および-ボタン、デフォルトで。 このスライダーは、マップの左隅にあります。

マップオプションでは、以下に示すように、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コントロールの外観は、水平バーまたはドロップダウンメニューに変更できます。 以下に、ズームコントロールとMapTypeコントロールのコントロールオプションのリストを示します。

Sr.No. Control Name Control Options
1 Zoom control
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 MapType control
  • 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
  • 左上
  • 右上
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • 左下の
  • 右下

例

次の例は、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>

それは次の出力を生成します-

「https://www.finddevguides.com/index.php?title=Google-maps-ui-controls&oldid=1943」から取得
Powered by MediaWiki