Google Maps - เริ่มต้นใช้งาน

Google Maps คืออะไร

Google Maps เป็นบริการทำแผนที่เว็บฟรีโดย Google ซึ่งให้ข้อมูลทางภูมิศาสตร์ประเภทต่างๆ การใช้ Google Maps สามารถทำได้

ค้นหาสถานที่หรือขอเส้นทางจากที่หนึ่งไปยังอีกที่หนึ่ง
ดูและนำทางผ่านภาพระดับถนนแบบพาโนรามาแนวนอนและแนวตั้งของเมืองต่างๆทั่วโลก
รับข้อมูลเฉพาะเช่นการจราจร ณ จุดใดจุดหนึ่ง

Google Maps มี API ที่คุณสามารถปรับแต่งแผนที่และข้อมูลที่แสดงบนแผนที่ได้ บทนี้จะอธิบายวิธีการโหลด Google Map อย่างง่ายบนหน้าเว็บของคุณโดยใช้ HTML และ JavaScript

ขั้นตอนในการโหลดแผนที่บนเว็บเพจ

ทำตามขั้นตอนด้านล่างเพื่อโหลดแผนที่บนหน้าเว็บของคุณ -

ขั้นตอนที่ 1: สร้างเพจ HTML

สร้างหน้า HTML พื้นฐานที่มีแท็กส่วนหัวและเนื้อหาดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

ขั้นตอนที่ 2: โหลด API

โหลดหรือรวม Google Maps API โดยใช้แท็กสคริปต์ดังที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

ขั้นตอนที่ 3: สร้างคอนเทนเนอร์

ในการยึดแผนที่เราต้องสร้างองค์ประกอบคอนเทนเนอร์โดยทั่วไปแท็ก <div> (คอนเทนเนอร์ทั่วไป) จะถูกใช้เพื่อจุดประสงค์นี้ สร้างองค์ประกอบคอนเทนเนอร์และกำหนดขนาดตามที่แสดงด้านล่าง -

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

ขั้นตอนที่ 4: ตัวเลือกแผนที่

ก่อนที่จะเริ่มต้นแผนที่เราต้องสร้างไฟล์ mapOptionsออบเจ็กต์ (สร้างขึ้นเช่นเดียวกับลิเทอรัล) และกำหนดค่าสำหรับตัวแปรการเริ่มต้นแผนที่ แผนที่มีสามตัวเลือกหลัก ได้แก่centre, zoomและ maptypeid.

centre- ภายใต้คุณสมบัตินี้เราต้องระบุตำแหน่งที่เราต้องการจัดกึ่งกลางแผนที่ เราต้องสร้างไฟล์LatLng วัตถุโดยส่งละติจูดและลองจิจูดของตำแหน่งที่ต้องการไปยังตัวสร้าง
zoom - ภายใต้คุณสมบัตินี้เราต้องระบุระดับการซูมของแผนที่
maptypeid- ภายใต้คุณสมบัตินี้เราต้องระบุประเภทของแผนที่ที่เราต้องการ ต่อไปนี้เป็นประเภทของแผนที่ที่ Google มีให้ -
- ROADMAP (ปกติแผนที่ 2D เริ่มต้น)
- ดาวเทียม (แผนที่ถ่ายภาพ)
- HYBRID (รวมสองประเภทขึ้นไป)
- TERRAIN (แผนที่ที่มีภูเขาแม่น้ำ ฯลฯ )

ภายในฟังก์ชันให้พูดว่า loadMap()สร้างอ็อบเจ็กต์ mapOptions และตั้งค่าที่ต้องการสำหรับ center, zoom และ mapTypeId ดังที่แสดงด้านล่าง

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

ขั้นตอนที่ 5: สร้างวัตถุแผนที่

คุณสามารถสร้างแผนที่โดยสร้างอินสแตนซ์คลาส JavaScript ที่เรียกว่า Map. ในขณะที่สร้างอินสแตนซ์คลาสนี้คุณต้องผ่านคอนเทนเนอร์ HTML เพื่อเก็บแผนที่และตัวเลือกแผนที่สำหรับแผนที่ที่ต้องการ สร้างวัตถุแผนที่ตามที่แสดงด้านล่าง

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

ขั้นตอนที่ 6: โหลดแผนที่

สุดท้ายโหลดแผนที่โดยเรียกใช้วิธี loadMap () หรือโดยการเพิ่มตัวฟัง DOM

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการโหลดแผนงานของเมืองที่ชื่อว่า Vishakhapatnam ด้วยค่าการซูม 12

<!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:12, 
               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>

สร้างผลลัพธ์ต่อไปนี้ -