Googleマップ-タイプ

前の章では、基本的なマップをロードする方法について説明しました。ここでは、必要なマップタイプを選択する方法を説明します。

地図の種類

Googleマップは4種類の地図を提供します。彼らは-

ROADMAP -これはデフォルトのタイプです。タイプを選択していない場合は、これが表示されます。選択した地域のストリートビューが表示されます。
SATELLITE -これは、選択した地域の衛星画像を表示するマップタイプです。
ハイブリッド-このマップタイプは、衛星画像上の主要な通りを示しています。
TERRAIN -これは、地形と植生を示すマップタイプです

構文

これらのマップタイプのいずれかを選択するには、以下に示すように、マップオプションでそれぞれのマップタイプIDを指定する必要があります-

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

ロードマップ

次の例は、タイプROADMAPのマップを選択する方法を示しています-

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

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

         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

   </head>

   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

衛星

次の例は、SATELLITEタイプのマップを選択する方法を示しています-

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

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

         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

   </head>

   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

ハイブリッド

次の例は、タイプHYBRIDのマップを選択する方法を示しています-

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

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

         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

   </head>

   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

地形

次の例は、TERRAINタイプのマップを選択する方法を示しています-

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

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

         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

   </head>

   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

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

Google-maps-types

Googleマップ-タイプ

地図の種類

構文

ロードマップ

衛星

ハイブリッド

地形

目次