Introduce to Google Maps :: ภาคปฐมบท
Sunday, May 24th, 2009Google Maps เป็นบริการหนึ่งของกูเกิ้ลที่ถึอว่าน่าสนใจ และสามารถนำมาใช้ประโยชน์อย่างเห็นได้ชัดบริการหนึ่งทีเดียว และสามารถนำมาประยุกต์ใช้ได้หลายอย่าง ยกตัวอย่างการใช้งานในบ้านเราเอง อย่างเช่น ใช้ลงประกาศ Event ต่างๆ หรือรายงานสภาพการจราจร ซึ่งนี่ก็เป็นที่เห็นได้ใช้สำหรับการเอา Google Maps มาใช้งาน ในตอนนี้ก็จะขอพูดถึงวิธีการดึงเอาข้อมูลแผนที่จาก Google Maps มาใช้งานกับ ส่วนเรื่อง traffic ไม่ต้องเป็นกังวลครับ เพราะกูเกิ้ลอนุญาตให้เรียกใช้ได้ถึง 500,00 page view ต่อวัน ซึ่งก็เป็นจำนวนที่มากจนเหลือเฟือครับ แต่ถ้าต้องการมากกว่านั้น ก็สามารถส่งอีเมล์ไปขอเพิ่มกับกูเกิ้ลได้ครับ
วิธีดึงข้อมูลแผนที่มาใช้ผ่าน Maps API จะมี 2 วิธีด้วยกัน คือ JavaScript และ Flash สำหรับตอนนี้และตอนต่อๆ ไป ขอเลือกใช้การติดต่อกับ Maps API ผ่าน JavaScript ครับ เพื่อให้เข้าใจได้ง่าย และนำไปใช้ได้เลยทันที่ ส่วนการดึงข้อมูลด้วย Flash นั้นรูปแบบ และโครงสร้างต่างๆ จะคล้ายกับทางฝั่ง JavaScript อยู่แล้ว
ก่อนที่จะเริ่มงานต้องการ key 1 ชุด เพื่อใช้อ้างอิงการเชื่อมต่อกับ Maps API สิ่งที่ต้องการก็คือ Google Account และ URL ที่จะนำไปใช้ซึ่งไม่จำเป็นที่จะต้องเข้าถึงได้จากภายนอก (‘localhost’ ก็ได้ใช้ได้เหมือนกัน) แต่ขอให้เป็น Domain หลักครับ เพื่อทำให้คีย์นี้สามารถใช้ได้กับทุกๆ Sub-Domain ภายในเว็บไซต์ เข้าไป ลงทะเบียนได้ ที่นี่ เมื่อลงทะเบียนเสร็จจะได้ชุดตัวอักษรมา 1 ชุดครับ เรียกว่า key จะใช้เพื่อระบุตัวตนของเราตอนที่เรียก Maps API พร้อมกับตัวอย่างการเรียกใช้สำหรับการเรียกใช้ด้วยวิธีการต่างๆ ที่ API สนับสนุน ส่วนผมใช้ส่วนที่เป็น JavaScript
... <script src="http://maps.google.com/maps?file=api&v=2&key=ABCDEF" type="text/javascript"> ...
เรียกใช้ Maps API ด้วย JavaScript
URL ที่อ้างถึง Maps API ด้านบนเป็นตัวเลือกน้อยที่สุดที่สามารถอ้างถึง Maps API ได้อย่างสมบูรณ์ครับ โดยที่แต่ละตัวจะมีความหมายดังนี้
- file – มีค่าเป็น api สำหรับดึงข้อมูล API
- v – เวอร์ชั่นของ API ที่ต้องการดึงมาใช้งาน ซึ่ง 2 เป็นเวอร์ชั่นที่ stable ในตอนนี้ (ขณะเขียน blog)
- key – ชุดตัวอักษรที่ได้จากการสมัครก่อนหน้านี้
นอกจากการเรียกใช้แบบ JavaScript แล้วยังใช้ Google AJAX API เพื่อโหลด Map API มาใช้งานได้ดังนี้
...
<script src="http://www.google.com/jsapi?key=ABCDF" type="text/javascript">
<script type="text/javascript">
google.load("maps", "2");
var map = new google.map.Map2(document.getElementById("mapCanvas"));
// Also create map object in the short term like this
// Where "G" is the short term of "google.map."
var map = new GMap2(document.getElementById("mapCanvas"));
...
</script>
...
เรียกใช้ Maps API ด้วย Google AJAX API
วิธีการทั้ง 2 นี้ต่างก็ดีไปกันคนละแบบ ซึ่งภายในเว็บที่จะนำไปใช้ ไม่ได้ใช้คุณสมบัติของ AJAX API ก็ขอให้เลื่อกการอ้างถึง Maps API ในแบบแรก เพื่อให้เว็บไซต์ทำงานได้เร็วยิ่งขึ้น
และส่วนที่สำคัญที่สุด ที่ต้องเพิ่มลงไปในไฟล์ html เพื่อให้โค้ดด้านบนสามารถทำงานได้อย่างสมบูรณ์ ก็คือ element ที่มี ID ว่า “mapCanvas” เป็นที่สำหรับนำ แผนที่ จาก Google Maps ที่เรียกได้มาวาดลงไป ในที่นี้ของ เพิ่มข้อมูลด้านล่างลงไปภายใน <body> ดังนี้
<body> ... <div id="mapCanvas"></div> ... </body>
เพิ่มตำแหน่งแสดงผล
ได้โค้ดทั้งหมดดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Google Maps API</title>
<style type="text/css" media="screen">
div#mapCanvas { width: 200px; height: 200px; background: #ede; }
</style>
</head>
<body onLoad="init()">
<div id="mapCanvas"></div>
</body>
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&key=ABCDEF"></script>
<script type="text/javascript">
function init() {
var map = new google.maps.Map2(
document.getElementById("mapCanvas")
);
map.setCenter(
new google.maps.LatLng(13.752222,100.493889),
7
);
}
</script>
</html>
ตัวอย่างการเรียกใช้ Google Maps API
จากตัวอย่างด้านบนเป็นการเรียกใช้งานเบื้องต้นเท่านั้น ซึ่งยังมีวิธีการกำหนดค่าต่างๆ เพื่อให้ได้ข้อมูลที่เราต้องการ จะอธิบายในคราวหน้าครับ
อ้างอิง
