Google Maps - ประเภท

ในบทที่แล้วเราได้กล่าวถึงวิธีการโหลดแผนที่พื้นฐาน ที่นี่เราจะดูวิธีการเลือกประเภทแผนที่ที่ต้องการ

ประเภทของแผนที่

Google Maps มีแผนที่สี่ประเภท พวกเขาคือ -

ROADMAP- นี่คือประเภทเริ่มต้น หากคุณไม่ได้เลือกประเภทใด ๆ สิ่งนี้จะปรากฏขึ้น แสดงมุมมองถนนของภูมิภาคที่เลือก
SATELLITE - นี่คือประเภทแผนที่ที่แสดงภาพถ่ายดาวเทียมของพื้นที่ที่เลือก
HYBRID - ประเภทแผนที่นี้แสดงถนนสายหลักบนภาพถ่ายดาวเทียม
TERRAIN - นี่คือประเภทแผนที่ที่แสดงภูมิประเทศและพืชพันธุ์

ไวยากรณ์

ในการเลือกประเภทแผนที่เหล่านี้คุณต้องระบุรหัสประเภทแผนที่ตามลำดับในตัวเลือกแผนที่ดังที่แสดงด้านล่าง -

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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -