Google지도-유형

이전 장에서 기본지도를로드하는 방법에 대해 설명했습니다. 여기에서는 필요한지도 유형을 선택하는 방법을 살펴 보겠습니다.

지도 유형

Google지도는 네 가지 유형의지도를 제공합니다. 그들은-

ROADMAP− 이것이 기본 유형입니다. 유형을 선택하지 않은 경우 표시됩니다. 선택한 지역의 스트리트 뷰를 보여줍니다.
SATELLITE − 선택한 지역의 위성 이미지를 보여주는지도 유형입니다.
HYBRID −이지도 유형은 위성 이미지에 주요 거리를 표시합니다.
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>

다음과 같은 출력이 생성됩니다.