เรียนรู้จาก “Hello, World” ของ Google Maps

Posted on 10. Feb, 2009 by MacroArt in Maps Developer

หลังจากที่สมัครขอใช้ Google Maps API แล้ว คุณจะเห็นตัวอย่างโค้ดสำหรับแสดงแผนที่ในเว็บไซต์ของคุณ เราจะลองศึกษาวิธีการใช้งาน API แบบเบื้องต้นจากตัวอย่างนี้กัน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
      type="text/javascript"></script>
    <script type="text/javascript">
 
    //<![CDATA[
 
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
 
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map_canvas" style="width:500px;height:300px"></div>
  </body>
</html>

ตัวอย่างนี้มีส่วนสำคัญ 5 ส่วนคือ

การเรียกใช้ Google Maps API ด้วยแท็ก <script>
การใช้แท็ก <div> ชื่อ map_canvas เพื่อให้เป็นพื้นที่สำหรับแสดงแผนที่
คำสั่ง JavaScript สำหรับสร้างตัวแปร object ของแผนที่
คำสั่งสำหรับกำหนดพิกัดจุดกึ่งกลางของแผนที่
การเริ่มต้นโหลดแผนที่ในแท็ก <body>

การเรียกใช้ Google Maps API

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
   type="text/javascript"></script>

ในส่วนแรกนี้เป็นเพียงการเรียก JavaScript จากเซิร์ฟเวอร์ของ Google Maps สังเกตว่ามีพารามิเตอร์สำคัญ 2 ตัวคือ v=2 ซึ่งหมายถึงการเรียกใช้ API เวอร์ชัน 2 และ key=abcdefg คือ API Key ของคุณเอง

การใช้ DOM กำหนดพื้นที่สำหรับแสดงแผนที่

<div id="map_canvas" style="width:500px;height:300px"></div>

จะต้องระบุว่าต้องการให้แสดงแผนที่ในตำแหน่งไหนของหน้าเว็บ โดยอ้างอิงถึงองค์ประกอบ Document Object Model (DOM) ซึ่งส่วนใหญ่แล้วจะใช้แท็ก <div> ที่กำหนดชื่อสำหรับใช้อ้างอิงในพารามิเตอร์ id และกำหนดขนาดของพื้นที่แสดงผลด้วยพารามิเตอร์ style ในตัวอย่างนี้ พื้นที่สำหรับแสดงแผนที่มีชื่อว่า map_canvas

สร้าง object แผนที่

var map = new GMap2(document.getElementById("map_canvas"));

คำสั่งนี้ใช้สำหรับสร้าง object GMap2 ในตัวแปรที่ชื่อ map โดยกำหนดให้แผนที่แสดงอยู่ใน DOM ที่ชื่อ map_canvas

กำหนดจุดกึ่งกลางแผนที่

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

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

ละติดจูดและลองจิจูดถูกกำหนดใน GLatLng() ซึ่งในที่นี้ละติจูดคือ 37.4419 และลองจิจูดคือ -122.1419

ละติจูดหรือเส้นรุ้งเป็นพิกัดที่ใช้บอกตำแหน่งบนพื้นโลกโดยวัดจากเส้นศูนย์สูตร ที่ตำแหน่งเส้นศูนย์สูตรจะมีค่าละติจูด 0 เหนือเส้นศูนย์สูตร ค่าละติจูดจะเป็นบวก ใต้เส้นศูนย์สูตร ค่าละติจูดจะเป็นลบ จุดสูงสุดที่ขั้วโลกเหนือมีค่าละติจูด 90 ส่วนจุดต่ำสุดที่ขั้วโลกใต้มีค่า -90

ลองจิจูดหรือเส้นแวงเป็นพิกัดที่ใช้บอกตำแหน่งบนพื้นโลกโดยวัดไปทางตะวันออกหรือตะวันตกจากเส้นสมมุติที่ลากจากเหนือลงใต้ เส้นสมมุตินี้ถูกกำหนดให้ลากผ่านเมืองกรีนนิช และเริ่มนับลองจิจูดที่ค่า 0 ฝั่งตะวันออกของเส้นนี้มีค่าลองจิจูดเป็นบวก ฝั่งตะวันตกมีค่าลองจิจูดเป็นลบ ค่าลองจิจูดสูงสุดและต่ำสุดอยู่ที่ 180 และ -180

กรุงเทพมหานครมีค่าละติจูด 13.75 และลองจิจูด 100.517

ส่วนค่าระดับการซูมในตัวอย่างนี้คือ 13 เป็นค่าที่ระบุให้ Google Maps ซูมเข้าไปดูรายละเอียดบนแผนที่ในระดับไหน ค่าซูมที่หยาบที่สุดคือ 0 ซึ่งจะมองเห็นแผนที่ของทั้งโลก ค่าซูมที่ละเอียดที่สุดขึ้นอยู่กับพื้นที่ว่า Google Maps มีข้อมูลแผนที่ของพื้นที่นั้นละเอียดแค่ไหน พื้นที่ในอเมริกามีค่าซูมละเอียดที่สุดอยู่ที่ 18

เริ่มโหลดแผนที่ลงบนหน้าเว็บ

<body onload="load()" onunload="GUnload()">

เมื่อผู้ใช้โหลดหน้าเว็บ พารามิเตอร์ onload จะถูกเรียกใช้ ซึ่งพารามิเตอร์นี้จะไปเรียก JavaScript function ชื่อ load() ซึ่งมีคำสั่งสำหรับสร้าง Object แผนที่และกำหนดจุดกึ่งกลางอยู่

เมื่อผู้ใช้ออกจากเว็บ พารามิเตอร์ unload() จะไปเรียก function GUnload() ซึ่งเป็น function ที่เราไม่ต้องเขียนเองเพราะมีอยู่ใน API อยู่แล้ว function นี้ใช้สำหรับลบข้อมูลต่างๆ ออกจากหน่วยความจำในคอมพิวเตอร์ของผู้ใช้

ดูตัวอย่างได้ที่ dev.googlemaps.in.th/hello-world

Popularity: 34% [?]

ช่วยกันบอกต่อ