グーグルマップ-タイプ

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

マップの種類

Googleマップには4種類の地図があります。彼らは-

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

構文

これらのマップタイプの1つを選択するには、以下に示すように、マップオプションでそれぞれのマップタイプ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>

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