Googleマップ-ズーム

ズーム値を増やす/減らす

マップオプションの zoom 属性の値を変更することにより、マップのズーム値を増減できます。

構文

ズームオプションを使用して、マップのズーム値を増減できます。以下は、現在のマップのズーム値を変更する構文です。

var mapOptions = {
   zoom:required zoom value
};

例：ズーム6

次のコードは、Vishakhapatnam市のロードマップをズーム値6で表示します。

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>

</html>

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

例：ズーム10

次のコードは、ズーム値10でVishakhapatnam市のロードマップを表示します。

<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>

   </head>

   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>

</html>

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

Google-maps-zoom

Googleマップ-ズーム

ズーム値を増やす/減らす

構文

例：ズーム6

例：ズーム10

目次