Google Maps - Các loại

Trong chương trước, chúng ta đã thảo luận về cách tải một bản đồ cơ bản. Ở đây, chúng ta sẽ xem cách chọn một loại bản đồ cần thiết.

Các loại bản đồ

Google Maps cung cấp bốn loại bản đồ. Họ là -

ROADMAP- Đây là kiểu mặc định. Nếu bạn chưa chọn bất kỳ loại nào, điều này sẽ được hiển thị. Nó hiển thị chế độ xem phố của khu vực đã chọn.
SATELLITE - Đây là loại bản đồ hiển thị các hình ảnh vệ tinh của khu vực đã chọn.
HYBRID - Loại bản đồ này hiển thị các đường phố chính trên ảnh vệ tinh.
TERRAIN - Đây là loại bản đồ thể hiện địa hình và thảm thực vật

Cú pháp

Để chọn một trong các loại bản đồ này, bạn phải đề cập đến id loại bản đồ tương ứng trong các tùy chọn bản đồ như hình dưới đây -

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

Lộ trình

Ví dụ sau cho thấy cách chọn bản đồ loại 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>

Nó sẽ tạo ra kết quả sau:

Vệ tinh

Ví dụ sau cho thấy cách chọn bản đồ loại 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>

Nó sẽ tạo ra kết quả sau:

Hỗn hợp

Ví dụ sau đây cho thấy cách chọn bản đồ kiểu 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>

Nó sẽ tạo ra kết quả sau:

Địa hình

Ví dụ sau đây cho thấy cách chọn bản đồ loại 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>

Nó sẽ tạo ra kết quả sau: