สารบัญ

บทนำ
 

Google Maps API ช่วยให้เราสามารถพัฒนาโปรแกรมเพื่อแทรก Google Maps เข้าไปเป็นองค์ประกอบส่วนหนึ่งในเว็บเพจที่ต้องการได้โดยเขียนเป็นรหัส html และ javascript ในรูปแบบที่ไม่สลับซับซ้อนนักสำหรับงานแผนที่ง่ายๆ Google Maps API มีขีดความสามารถกว้างขวางเน้นในด้านการนำเสนอข้อมูลแผนที่ในลักษณะหมุดปัก (Push pin / Place marker) ซึ่งสามารถกำหนดให้แสดงข้อมูลประกอบแผนที่เมื่อผู้ใช้คลิกที่ตัว push pin /marker นั้นๆ หรือองค์แผนที่แบบเส้น (Polyline) พื้นที่ (Polygon) และภาพ (Ground overlay)  บริการด้านแผนที่ของ Google นี้เริ่มต้นตั้งแต่กลางปีคศ. 2005 เป็นบริการฟรี จัดให้แก่ผู้ใช้ทั่วโลกโดยคาดหวังที่จะใช้การโฆษณาบนแผนที่เป็นรายได้กลับคืนแต่ในระยะแรกจะยังไม่มีการโฆษณาดังกล่าว ในการจัดบริการแผนที่นี้ ส่วนประกอบพื้นฐานสำคัญที่ดึงดูดใจให้มีผู้ใช้งานแผนที่ของกูเกิ้ลเป็นอย่างมากคือแผนที่และภาพถ่ายดาวเทียมคุณภาพดีซึ่งครอบคลุมทั่วพื้นผิวโลกในมาตราส่วนต่างๆ ตามความเหมาะสม ทำให้การพัฒนาต่อยอดจากสิ่งที่กูเกิ้ลจัดไว้ให้แล้วเป็นงานที่น่าสนใจ ไม่ต้องลงทุนจัดหาทรัพยากรที่หายากและราคาแพงเองมาใช้ในโครงการอย่างที่เคยเป็นในอดีต

เนื่องจากจัดทำ Google Maps API เป็นโปรแกรมรหัสเปิด (Open source program) ในภาษาจาวาสคริปต์ จึงทำให้ผู้ใช้ที่เป็นนักพัฒนาโปรแกรมสามารถเข้าไปดูรายละเอียดของรหัสโปรแกรมได้สะดวก รวมทั้งสามารถปรับเปลี่ยนแก้ไขโปรแกรมได้ ทำให้ Google Maps API มีผู้ใช้กันอย่างกว้างขวาง เหตุผลสำคัญอีก 2 อย่างที่ส่งเสริมให้มีผู้ใช้มากคือแผนที่และภาพถ่ายดาวเทียมคุณภาพดีที่ใช้สนับสนุนการทำแผนที่มีให้ครอบคลุมพื้นที่ต่างๆ อย่างกว้างขวาง และชื่อเสียงของโปรแกรม Google Earth เสริมด้วยบริการ Google Local ที่มีมาก่อน

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

Google Maps mashup

คำว่า “mashup” หรือ "mash-up" เป็นศัพท์เฉพาะในแวดวงของนักพัฒนา application แบบ client-server ประเภทที่ทำเติมต่อขึ้นเองโดยใช้software tool และ ทรัพยากรที่ทางผู้ให้บริการจัดไว้ให้ เป็นคำใหม่ที่ใช้กันหนาหูในปี 2005 มีที่มาจากวงการเพลงเมื่อนักจัดรายการเพลงเกิดความคิดแหวกแนวโดยทดลองเปิดเพลง 2 เพลงพร้อมๆกัน ทำให้เกิดเสียงเพลงที่ผสมผสานที่แปลก และบางครั้งมีความไพเราะ และเรียกขานผลที่เกิดขึ้นว่า “mashup”

mashup ที่กล่าวถึงกันมากในแวดวงนักพัฒนาแอพลิเคชันที่ใช้บนอินเตอร์เน็ตมีองค์ประกอบอย่างน้อย 2 ส่วน ส่วนแรกคือ application program interface (API) และทรัพยากรสนับสนุนจากเซิร์ฟเวอร์ของผู้ให้บริการ และส่วนที่ 2 คือโปรแกรมและทรัพยากรของผู้พัฒนาแอพลิเคชันนั้น (ติดตั้งอยู่ที่เว็บไซท์ของผู้พัฒนา) ต้วอย่างกรณีของ Google Maps mashup ก็จะหมายถึงเว็บเพจที่นักพัฒนาเว็บไซท์สร้างขึ้นให้มีส่วนประกอบที่เป็นแผนที่ที่สามารถทำงานแบบโต้ตอบกับผู้ใช้ได้ โดยมีแผนที่ฐานเป็นส่วนที่ Google จัดไว้ให้แล้ว และมีข้อมูลแผนที่ของตนเองซ้อนทับในลักษณะหมุดปัก (ที่สามารถแสดงข้อความซึ่งแฝงอยู่เมื่อผู้ใช้คลิกที่หมุดเหล่านั้น) หรือลักษณะอื่นที่สลับซับซ้อนกว่านั้น

ความรู้ความชำนาญที่ควรมีในผู้ใช้ Google Maps API
 

ในการจัดทำ Google Maps mashup ระดับต้นจำเป็นต้องใช้ความรู้พื้นฐานในการสร้าง web page ดัวยภาษา html/ xhtml การเขียนโปรแกรม javascript ความรู้เรื่องการแผนที่และภูมิศาสตร์ และ ความรู้ในด้าน xml technology ในระดับปฏิบัติการที่สูงขึ้นมีความต้องการที่สลับซับซ้อนมากขึ้นตามลำดับ
 
ในที่นี้ขอกล่าวโดยสรุปเกี่ยวกับความรู้พื้นฐานเบื้องต้นที่จำเป็นในงานพัฒนา Google Maps mashup ซึ่งควรมี ดังนี้
1. html/ xhtml
2. javascript
3. ความรู้พื้นฐานวิชาภูมิศาสตร์ และการแผนที่
 
ความรู้เพิ่มเติมที่จำเป็นสำหรับงานพัฒนาขั้นกลาง-สูง
1. XML technology
2. AJAX (javascript + xml)
3. JSON (JavaScript Object Notation)
 
ความรู้เพิ่มเติมสำหรับงานใหญ่ งานพิเศษ
1. Server side scripting (PHP, etc)
2. Web database software (MySql, etc)
 
ความรู้อื่นที่เกี่ยวข้อง มีทั้งที่เป็นเรื่องกราฟิก แผนที่ และ อื่นๆ
1. Web map service (WMS) concept
2. SVG (Scalable Vector Graphic)
3. GML (Geographic Markup Language)
4. GIS, GPS, Cartography
5. etcs.
 

ขั้นตอนหลักในการดำเนินการจัดทำ Google Maps mashup
 

1. ยื่นคำขอ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API  เว็บไซต์นั้นเป็นที่ที่เราจะนำเว็บเพจที่มี Google Maps เป็นองค์ประกอบไปวางไว้

(URL ที่ยื่นคำขอรับ API Key:- http://www.google.com/apis/maps/signup.html)

2. เขียนโปรแกรมสร้างเว็บเพจที่ใช้ Google Maps API ช่วยสร้างแผนที่

(แหล่งเอกสารอ้างอิง:- http://www.google.com/apis/maps/documentation/reference.html)

3. Upload งานที่ทำเสร็จแล้วขึ้นสู่เว็บไซท์ และทดลองใช้งาน

[--ไปสารบัญ--]

เค้าโครงของแฟ้มข้อมูล HTML สำหรับการสร้าง Google Maps Mashup อย่างง่าย
 

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

ข้อความ "v=2" ซึ่งแทรกอยู่ใน "http://maps.google.com/maps?file=api&v=2 ..." เป็นพารามีเตอร์ระบุความต้องการขอใช้  Google Maps API เวอร์ชัน 2 เพื่อทำการประมวลผล

ในส่วน <!-- body content here --> ควรมี <div id='map_canvas' /> เพื่อทำหน้าที่เป็นกรอบของขอบเขตแสดงแผนที่

และ <!-- some javascript here --> เตรียมไว้เป็นที่ของจาวาสคริปต์ซึ่งจะนำมาแทรกภายหลัง

ตัวอย่างพื้นฐานเพื่อการเริ่มต้น

ตัวอย่างทั้งหมดที่ยกมาแสดงในที่นี้ส่วนใหญ่จะมีให้เฉพาะส่วนประกอบที่เกี่ยวกับการใช้ Google Maps API เท่านั้นเพื่อความกระชับ ทั้งนี้ยกเว้นตัวอย่างแรกที่ทำหน้าที่ kick start ให้กับผู้ใช้ นอกจากนั้นยังได้ละเว้นส่วนประกอบของโปรแกรมที่ทำหน้าที่สำคัญที่ควรมีในการทำงานจริง เช่น ตรวจสอบความสามารถของบราวเซอร์ที่ผู้ใช้ติดตั้งอยู่ว่าทำงานเข้ากันได้หรือไม่ การตรวจสอบป้องกันการทำงานผิดพลาด การทำให้มีคุณลักษณะเป็นมิตรกับผู้ใช้ ฯลฯ 
 

ตัวอย่าง 1  การสร้างแผนที่อย่างง่าย  (The "Hello, World" of Google Maps)

ตัวอย่างแรกนี้แสดงการสร้างแผนที่อย่างง่ายให้ศูนย์กลางขอบเขตแผนที่อยู่ที่เมือง Palo Alto แห่งรัฐแคลิฟอร์เนียซึ่งมีพิกัดภูมิศาสตร์ ละติจูด / ลองจิจูดเป็น 37.4419, -122.1419 องศา ตามลำดับ (สำหรับกรุงเทพฯ ให้ใช้ 13.80608, 100.57983)
หมายเหตุ ข้อความที่อยู่ภายใน comment tag เช่น <!-- HTML_comment --> หรือ /* javascript_comment */  เป็นข้อความอธิบายแทรกภายในรหัสโปรแกรม

คลิก map-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

ตัวอย่าง 2  การสร้างแผนที่ให้เลื่อนภาพ (animate.html)

ตัวอย่างแผนที่ซึ่งเคลื่อนตำแหน่งได้พร้อมมีแอนิเมชัน

แผนที่ในตัวอย่างนี้เมื่อเปิดแสดงผลแล้ว จะนิ่งอยู่ 1 วินาที แล้วจะเลื่อนภาพไปยังตำแหน่งใหม่

คลิก map-animate.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

การกำหนดให้มีตัวควบคุมบนแผนที่
 

เราสามารถสร้างองค์ประกอบที่ทำหน้าที่ปฏิสัมพันธ์กับผู้ใช้เพื่อควบคุมการใช้งานแผนที่ได้โดยใช้ addControl method

ตัวอย่าง 3  การสร้างตัวควบคุมแผนที่ (control-maptypes.html)

ตัวอย่างต่อไปนี้ แสดงการสร้างตัวควบคุมแผนที่ให้เป็นองค์ประกอบส่วนหนึ่งบนแผนที่โดยใช้ GMapTypeControl() ซึ่งปกติจะมีตัวเลือกแสดงภาพบนฉากหลังเป็น 3 แบบ Map/ Satellite/ และ Hybrid  เพื่อให้เห็นความยืดหยุ่นของโปรแกรมที่สามารถถอดถอนชนิดแผนที่ที่ไม่ต้องการออกไปด้วย GMap2.removeMapType() หรือ เพิ่มชนิดแผนที่ที่ต้องการด้วย GMap2.addMapType()  จึงแสดงตัวอย่างการถอดถอน Hybrid map ด้วยคำสั่ง map.removeMapType(G_HYBRID_MAP) หลังจากนั้นจึงสร้างตัวควบคุมแผนที่ด้วยคำสั่ง addControl() ทำให้ผลลัพธ์เป็นแผนที่ที่มีตัวเลือกเพียง 2 แบบคือ Map และ Satellite

คลิก control-maptypes.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

ตัวรับฟังอุบัติการณ์ (Event Listener)
 

เนื่องจากอุบัติการณ์ทั้งหลายต้องขึ้นทะเบียน (register) ไว้ในสารบบก่อนจึงจะมีผลในการใช้งาน (GEvent namespace ทำหน้าที่นี้) กล่าวคือ สามารถตอบสนองต่อการใช้งานแผนที่แบบโต้ตอบได้  การจัดสารบบเพื่อรับฟังอุบัติการณ์ดังกล่าวทำขึ้นได้โดยใช้ GEvent.addListener method เป็นตัวกระทำ

ตัวอย่าง  (event-simple.html)

ตัวอย่างการใช้อุบัติการณ์ "click" เป็นตัวฉุด (หรือลั่นไก) ให้เกิดการแสดงข้อความ "You clicked the map." โดยแสดงผลทุกครั้งที่ผู้ใช้คลิกในบริเวณแผนที่

คลิก event-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

ตัวอย่าง 4 (event-context.html)

ตัวอย่างต่อไปนี้สาธิตการใช้อุบัติการณ์ "moveend" เป็นตัวฉุดให้เกิดการแสดงค่าพิกัดละติจูด-ลองจิจูด ของจุดกลางแผนที่ค่าใหม่ล่าสุด โดยแสดงผลทุกครั้งที่การเลื่อนแผนที่จากที่หนึ่งไปยังที่ใหม่เสร็จสิ้นลง

คลิก event-context.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

การเปิด Info Window
 

"Info Window" เป็นบัญชรแสดงผลแบบผุดขึ้น (pop-up) ที่เป็นได้ทั้งข้อความและ/หรือรูปภาพ มีไว้เพื่อใช้นำเสนอข้อมูล ณ ตำแหน่งที่ต้องการบนแผนที่ สร้างขึ้นได้ด้วย openInfoWindow method โดยป้อนค่าพิกัดตำแหน่งและ html element เป็นองค์ประกอบ ทั้งนี้ html element คือส่วนของเนื้อหาที่เขียนเป็นรหัส html ตามที่ต้องการนำเสนอใน Info Window หรือใช้จาวาสคริปต์สร้างเป็น html element ก็ได้

ตัวอย่าง 5  การเปิด Info Window (map-infowindow.html)

ตัวอย่างนี้จะเปิด "Info Window" สำหรับตำแหน่งจุดกลางแผนที่โดยมีข้อความ "Hello, world" แสดงอยู่ภายในบัญชรที่ผุดขึ้นนั้น

คลิก map-infowindow.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

วัตถุซ้อนทับบนแผนที่ (Map Overlays)
 

Overlays หมายถึงวัตถุที่สร้างขึ้นวางทับอยู่บนแผนที่ถนนและ/หรือภาพถ่ายดาวเทียมที่เป็นฉากหลัง (เช่น marker, polyline, polygon, และ ground overlay) ตัวอย่างนี้แสดงการสร้าง marker จำนวน 10 ตัวเพื่อวางไว้ที่ตำแหน่งต่างๆ แบบสุ่ม ในรหัสของตัวอย่างข้างล่าง คำสั่ง GMarker(point) ทำหน้าที่เขียน marker ณ ตำแหน่งที่กำหนดด้วยค่าละติจูด-ลองจิจูดจากตัวแปร "point" โดยใช้สัญกรปริยาย (default icon) ซึ่งมีลักษณะเป็นหมุดปักอยู่บนแผนที่
 

ตัวอย่าง  Simple marker (marker-simple.html)
Marker ที่สร้างขึ้นใช้สัญกรแบบปริยายซึ่งมีลักษณะเป็นหมุดปักสีแดง ในโปรแกรมไม่ต้องระบุคุณลักษณะใดๆ ของสัญกร

คลิก marker-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

ตัวอย่าง  Marker with simple icon (icon-simple.html)
Marker ที่สร้างขึ้นใช้สัญกรแบบง่ายๆ ซึ่งมีลักษณะเป็นหมุดปักสีน้ำเงิน ในโปรแกรมต้องระบุคุณลักษณะของสัญกร

คลิก icon-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

ตัวอย่าง Simple Polyline

ตัวอย่างนี้สาธิตการสร้าง Polyline อย่างง่าย เส้นที่สร้างควรเป็นเส้นสั้นๆ ระยะทางไม่กี่กิโลเมตร

คลิก polyline-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

ตัวอย่าง Geodesic Polyline

ตัวอย่างนี้สาธิตการสร้าง Geodesic Polyline ซึ่งเหมาะกับเส้นที่มีความยาวมาก เช่น ยาวหลายร้อยกิโลเมตร เส้นที่ได้จะเป็นเส้นโค้งวงกลมใหญ่บนแผนที่

คลิก polyline-geodesic.html เพื่อดูผลงานที่ทำเสร็จแล้ว

ตัวอย่าง Simple Polygon

ตัวอย่างนี้สาธิตการสร้างรูปปิด (Polygon) อย่างง่าย ทุกครั้งที่ผู้ใช้คลิกภายในแผนที่นี้ จะเกิดรูปปิดสี่เหลี่ยมจตุรัสขนาดประมาณ 10 หน่วย pixel ในบริเวณนั้น

คลิก polygon-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

การตอบสนองต่ออุบัติการณ์ "click"
 

การลั่นไกให้เกิดการกระทำอย่างหนึ่งเมื่อผู้ใช้คลิกตำแหน่งบนแผนที่ จะต้องทำการ register ตัวรับฟัง (listener) เพื่อทำหน้าที่รับฟังอุบัติการณ์ "click" ที่เกิดขึ้นบน GMap2 instance เมื่อมีอุบัติการณ์ชนิดนั้นเกิดขึ้น ตัวรับฟังจะลั่นไก ก่อให้เกิด -- event handler จะได้รับ 2 arguments:
1. marker ตัวที่ถูกคลิก (ถ้ามี)และ
2. ค่าพิกัดตำแหน่ง GLatLng ของตำแหน่งที่ถูกคลิก
ถ้าไม่มี marker ใดถูกคลิก argument ตัวแรกจะมีค่าเป็น null
หมายเหตุ: ขณะนี้ ในกลุ่ม built-in overlay มีพียง Marker เท่านั้น ที่สามารถตอบสนองอุบัติการณ์ "click" ได้ ส่วน overlay ชนิดอื่น เช่น GPolyline ยังไม่มีคุณสมบัติดังกล่าว
 

ตัวอย่าง 7  การใช้อุบัติการณ์คลิก

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

[--ไปสารบัญ--]

การเปิด Info Window กำกับ Marker เพื่อแสดงข้อมูลแผนที่
 

ตัวอย่างต่อไปนี้แสดงการใช้ custom info window แสดงผลกำกับ marker ซึ่งใช้สัญกรที่กำหนดขึ้นแบบซับซ้อน โดยให้ตอบสนองต่ออุบัติการคลิก (click event) ทั้งนี้ให้มีผลต่อการคลิก marker ทุกตัว ในการนี้เราใช้ความสามารถที่เป็นข้อดีของ JavaScript function closure ให้เกิดการเปลี่ยนแปลงเนื้อหาที่นำเสนอภายใน info window ที่ป็นเรื่องของ marker แต่ละตัวเป็นการเฉพาะ

ตัวอย่าง 8  Custom info window and icon (icon-custom.html)

1. สาธิตการใช้ custom info window แสดงผลกำกับ marker โดยให้ตอบสนองต่ออุบัติการคลิก
2. สาธิตการสร้างสัญกร ซึ่งในทางปฏิบัติเราอาจใช้ icon ต่างๆเป็นสัญลักษณ์แผนที่โดยสร้างให้มีส่วนที่แตกต่างกันตรง foreground เพียงอย่างเดียว แต่มีส่วนเหมือนกันที่ shape และ shadow วิธีดำเนินการอย่างง่ายเพื่อให้ได้คุณสมบัติตามแบบที่กล่าวคือ การใช้ copy constructor ของ GIcon class ซึ่งจะช่วย copy คุณสมบัติทั้งหมดไปยัง icon ตัวใหม่ซึ่งจะเป็นตัวที่เราทำการปรับแต่งให้ได้คุณสมบัติที่ประสงค์

คลิก icon-custom.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

Info Window แบบหลายแผ่นเอกสารซ้อนกัน
 

การจัดให้ Info Window มีรูปแบบที่สลับซับซ้อนแบบ multiple named tabs สามารถทำได้โดยใช้ method สองตัวซึ่งได้แก่ 1 -- openInfoWindowTabs() และ 2 -- GInfoWindowTab

ตัวอย่าง 9 (tabbedinfowindow.html)

ตัวอย่างนี้แสดงการสร้าง tabbed info window อย่างง่าย โดยกำหนดให้ปรากฏขึ้นด้านบนของ marker ตัวหนึ่ง

คลิก tabbedinfowindow.html  เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

การสร้างสัญกร (Icons)

สัญกรหรือไอคอนในที่นี้หมายถึงรูปกราฟิกที่สื่อความหมายอย่างใดอย่างหนึ่ง ทำหน้าที่เป็นองค์ประกอบในการสร้าง marker หรือหมุดที่วางหรือปักบนแผนที่ ดังนั้นสัญลักษณ์แบบจุดที่ใช้บนแผนที่จึงเกิดจากหมุดปักที่มีสัญกรแบบต่างๆ นั่นเอง

ตัวอย่าง 10 (icon-simple.html)

ตัวอย่างนี้แสดงการสร้างหมุดปักจำนวน 10 ตัว ให้มีสัญกรหรือไอคอนที่ใช้ G_DEFAULT_ICON เป็นต้นแบบ แล้วกำหนดคุณลักษณะเฉพาะส่วนของ "รูปภาพส่วนหน้า" (foreground image) ให้กับสัญกรเหล่านั้น

คลิก icon-simple.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

ตัวอย่าง 11 (icon-complex.html)

ตัวอย่างนี้แสดงการสร้างหมุดปักจำนวน 10 ตัว ให้มีสัญกรหรือไอคอนที่ใช้ในโครงการ Google Ride Finder เป็นต้นแบบ แล้วกำหนดคุณลักษณะส่วนต่างๆ ซึ่งได้แก่ image, shadow, iconsize, shadowSize, iconAnchor, และ infoWindowAnchor ให้กับสัญกรเหล่านั้น

คลิก icon-complex.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

การใช้ XML และ Asynchronous HTTP เพื่อนำเข้าข้อมูลแผนที่
 

ตัวอย่างนี้แสดงการ download แฟัมข้อมูลแบบสถิตย์ (static file) ชื่อ "data.xml" ซึ่งบรรจุรายการค่าพิกัด  latitude/ longitude  ในรูปแบบ XML โดยใช้ GDownloadUrl method  หลังจากที่ download เสร็จ ก็ทำการ parse ข้อมูลด้วย GXml.parse method และนำค่าที่ได้ไปประมวลผลต่อตามลำดับ โดยให้ผลลัพธ์เป็น marker วางบนแผนที่ในตำแหน่งตามค่าที่กำหนดในเอกสาร xml ที่ใช้เป็นข้อมูลป้อนเข้า

ตัวอย่าง 12 (async.html)

คลิก async.html เพื่อดูผลงานที่ทำเสร็จแล้ว

คลิก data.xml เพื่อดูเนื้อหาในแฟ้มข้อมูล

[--ไปสารบัญ--]

ตัวควบคุมแผนที่แบบประดิษฐ์เอง (Custom Map Controls)
 

ในเวอร์ชัน 2 ผู้ใช้สามารถสร้างตัวควบคุม (เช่น ตัวควบคุมการย่อ/ขยาย หรือเลื่อนภาพ) ขึ้นใหม่ได้โดยทำ subclass จากตัว GControl class ที่มีอยู่แล้ว ตัวอย่างที่จะแสดงเป็นการสร้างตัว control แบบมีข้อความกำกับที่ทำหน้าที่ย่อขยายภาพ ซึ่งจะแตกต่างจากตัวย่อขยายภาพ มาตรฐานแบบกราฟิกล้วนที่มีอยู่แล้ว

ในตัวอย่างนี้มีการใช้ class ที่เกี่ยวข้องชื่อ GTextualZoomControl เพราะมี method ที่จำเป็นในการทำงาน ดังนี้

1/ initialize() method ใช้สร้าง DOM element ของตัวควบคุมแผนที่ที่ต้องการสร้างขึ้น

2/ getDefaultPosition method เพื่อ return ค่า GControlPosition ที่จะใช้เมื่อตัวควบคุมแผนที่ของเราได้สร้างขึ้นสำเร็จ

และ

3/ setButtonStyle_ method สำหรับตั้งค่า CSS ให้ได้รูปโฉมของตัวควบคุมที่เหมาะสม

ดูเอกสารอ้างอิงเกี่ยวกับ GControl class เรื่อง method ที่เราสามารถ override ในกระบวนการทำ custom controls เพื่ออ่านรายละเอียดเพิ่มเติม

ตัวควบคุมแผนที่ทุกตัวต้องจัดวางไว้ใน map container ซึ่งเป็น div element ตัวหนึ่งเพื่อให้สามารถเข้าถึงได้ด้วย GMap2.getContainer() method

ตัวอย่าง 13 (control-custom.html)

คลิก control-custom.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

วัตถุวางบนแผนที่แบบทำเป็นการเฉพาะ (Custom Overlays)
 

วัตถุวางบนแผนที่แบบมาตรฐานมีอยู่ 4 อย่าง (GMarker, GPolyline, GPolygonและ Ground Overlay) อาจไม่เพียงพอหรือสะดวกในการออกแบบงานแผนที่ Google Maps API เวอร์ชัน 2 นี้จึงเปิดโอกาสให้ผู้ใช้สร้างวัตถุ overlay ที่ทำขึ้นเป็นการเฉพาะเพิ่มเติม เพื่อให้การออกแบบและประกอบแผนที่ทำได้ดี และหลากหลายขึ้นกว่าเดิม

ในหัวข้อนี้จะแสดงการสร้าง Map overlay ลักษณะรูปสี่เหลี่ยมผืนผ้า (rectangle) โดยผลที่ได้จะเป็น subclass ของ GOverlay class ทำนองเดียวกับ marker และ polyline ซึ่งเป็น map overlay เพียง 2 ชนิดที่มีอยู่แล้ว  ในการเขียนโปรแกรมจะต้องทำให้ rectangle มี method 4 ตัวที่จำเป็นขั้นต้น ซึ่งได้แก่ initialize(), remove(), copy(), และ redraw()

initialize() ทำหน้าที่สร้าง DOM elements ให้ส่งผลเป็นรูปสี่เหลี่ยมผืนผ้าวางบนแผนที่ตามต้องการ

remove() ทำหน้าที่กำจัดตัวเองออกไปจากแผนที่

copy() ทำหน้าที่สำเนาตัวเองเพื่อนำไปใช้เป็น instance ตัวใหม่

redraw() ทำหน้าที่สร้างตัวเองขึ้นใหม่บนแผนที่ให้ถูกต้องตรงตำแหน่งตามมาตราส่วนและการฉายแผนที่ในสถานะปัจจุบัน

(ดู เอกสารอ้างอิง 2 เรื่อง class reference for GOverlay สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ methods ที่เราสามารถ override ได้เมื่อทำการสร้าง custom overlays)

DOM element ทุกตัวที่ใช้ประกอบเป็น overlay จะถูกจัดไว้บน map pane ซึ่งมีค่า z-order ตามลำดับที่ในการแสดงผล เช่น polylines ซึ่งถูกกำหนดให้อยู่ระดับเดียวกับ map layer จะถูกวางไว้ที่ G_MAP_MAP_PANE  รูปเงาของ Markers ถูกวางไว้ที่ G_MAP_MARKER_SHADOW_PANE ตัว Marker ถูกจัดไว้ที่ G_MAP_MARKER_PANE

การจัดวาง overlay elements ให้อยู่บน pane ที่เหมาะสมช่วยให้เกิดการแสดงผลที่สมควร กล่าวคือ polylines อยู่ต่ำกว่า marker shadows และ info window แต่อยู่เหนือกว่า overlays อื่นบนแผนที่  ในตัวอย่างต่อไปนี้ overlay ของเราจะถูกกำหนดให้อยู่ระดับเดียวกับ map ดังนั้นจึงต้องใช้ G_MAP_MAP_PANE ซึ่งมีค่า z-order น้อยสุด ทั้งนี้เป็นไปในแนวเดียวกันกับ GPolyline ซึ่งเป็น overlay ปกติ

ตัวอย่าง 14 (overlay-custom.html)

รูปสี่เหลี่ยมผืนผ้า (Rectangle) ที่เราจะสร้างขึ้นเป็น overlay อย่างง่าย จะมีขอบเขต latitude / longitude บนแผนที่โดยมีขนาดประมาณ 1/4 ของแผนที่ ลักษณะเส้นขอบเขตของรูปสามารถกำหนดได้ด้วย ความหนา (weight) สี (color) และ ระดับความทึบแสง (opacity)

คลิก overlay-custom.html เพื่อดูผลงานที่ทำเสร็จแล้ว

[--ไปสารบัญ--]

การแสดงข้อมูลแผนที่จากแฟ้มข้อมูล KML/GeoRSS

Google Maps API สนับสนุนการใช้ข้อมูลนำเข้าที่อยู่ในฟอร์แมต KML และ GeoRSS เพื่อแสดงผลเป็นกราฟิกบนแผนที่ ข้อมูลภายใน KML หรือ GeoRSS มีทั้งที่เป็นรหัสสำหรับสร้างองค์แผนที่ประเภทจุด เส้น และพื้นที่ ดังนั้นเมื่อนำมาแสดงผลบนแผนที่กูเกิ้ล จะได้วัตถุที่เป็น marker, polyline, และ polygon
ในทางเทคนิค วัตถุที่ถูกสร้างขึ้นบนแผนที่นี้จะเป็น GGeoXml object โดยมี addOverlay() method เป็นกระบวนการทำหน้าที่สร้าง และเราสามารถลบวัตถุประเภทนี้ทิ้งได้โดยใช้คำสั่ง removeOverlay()

ตัวอย่าง 15 การใช้ข้อมูลรูปแบบ KML และ GeoRSS

ตัวอย่าง (ใช้ KML file)
...
var gr_overlay = new GGeoXml("http://lecturer.eng.chula.ac.th/fsvskk/gglmap2/thai_gtopo30_ground_ovl.kml");
...
map.addOverlay(gr_overlay);

คลิก ground_ovl_sample.htm เพื่อดูตัวอย่าง
 

ตัวอย่าง การใช้ข้อมูลรูปแบบ jpeg file เป็น ภาพวางทับบนแผนที่

ถ้าโปรแกรมมีปัญหาจะทำอย่างไร
 

เมื่อรหัสโปรแกรมที่เขียนขึ้นมีความผิดพลาดหรือใช้งานไม่ได้  แนวทางแก้ไขที่ควรปฏิบัติมีหลายประการ เช่น

บทสรุป

ผลงานประเภท Web map ในอดีตเป็นงานที่มีความสลับซับซ้อน ต้องลงทุนสูงในการจัดทำและบำรุงรักษา โดยเฉพาะอย่างยิ่งในด้านข้อมูลแผนที่ ภาพถ่ายทางอากาศ/ดาวเทียม และเทคโนโลยีสนับสนุน ที่ผ่านมาจึงเป็นงานที่จำกัดอยู่ในวงแคบเฉพาะองค์กรขนาดใหญ่เท่านั้น การให้บริการของ Google ในรูปแบบ Google Maps API ทำให้ผู้ใช้ทั่วโลกสามารถสร้าง Web map (Map mashup เป็นเว็บแม้พชนิดหนึ่ง) ที่มีคุณสมบัติตามกำลังความสามารถของแต่ละบุคคลโดยไม่ต้องเสียค่าธรรมเนียม นับว่าเป็นการปฏิวัติครั้งสำคัญในวงการแผนที่บนอินเทอร์เน็ต บริการด้านแผนที่ของ Google ก่อให้เกิดความตื่นตัวขึ้นเป็นอย่างสูงในวงการอินเทอร์เน็ตที่มีความต้องการปรับปรุงเนื้อหาและวิธีการนำเสนอข้อมูลบนเว็บไซต์ให้น่าสนใจโดยมีแผนที่เป็นองค์ประกอบ ผลกระทบที่เกิดขึ้นทำให้คู่แข่ง เช่น Yahoo, Microsoft และ MapQuest ต้องร้อนตัวเปิดให้บริการฟรีในลักษณะคล้าย ๆ กัน บทความนี้ได้กล่าวถึงขั้นตอนการสร้าง Google Maps Mashup สำหรับผู้สนใจ ได้ให้ตัวอย่างที่สามารถนำไปทดลองใช้งานได้ที่ครอบคลุมขีดความสามารถอันน่าสนใจของ Google Maps อย่างพอเพียงที่จะช่วยให้ผู้ใช้เห็นรายละเอียดการทำโปรแกรมพอสมควร มีความเข้าใจในกลไกการทำงานบ้างตามสมควร และ น่าจะช่วยให้เริ่มต้นลงมือได้อย่างมั่นใจ

เอกสารอ้างอิง

1.      Google Maps API Developer Guide (http://code.google.com/apis/maps/documentation/index.html)

2.      Google Maps API Reference (http://code.google.com/apis/maps/documentation/reference.html)

3.      Google Maps API Introduction (http://code.google.com/apis/maps/documentation/introduction.html)

[--ไปสารบัญ--]
 

ภาคผนวก1 รหัสโปรแกรมอย่างสมบูรณ์ของตัวอย่าง 1 (The "Hello, World" of Google Maps)

ภาคผนวก 2 เว็บบราวเซอร์ที่สามารถใช้งาน Google Maps API ได้

เว็บบราวเซอร์ที่สามารถใช้บริการของ Google Local ได้ก็จะสามารถใช้ Google Maps API ได้ด้วยเพราะมีความต้องการที่เหมือนกัน หากต้องการเขียนรหัสตรวจสอบขีดความสามารถของบราวเซอร์ว่ามีความเข้ากันได้กับ Google Maps API หรือไม่สามารถใช้ Global method ที่ชื่อ GBrowserIsCompatible() ซึ่งเป็นส่วนหนึ่งใน Google Maps API ให้ทำหน้าที่ตรวจก็ได้ ขณะที่เรียบเรียงบทความนี้ (พฤษภาคม คศ. 2006) เว็บบราวเซอร์รุ่นปัจจุบันของ MS Internet Explorer, Mozilla Firefox, Netscape Navigator, และ Opera ต่างก็สามารถใช้งานได้ดี

ภาคผนวก 3 รวมคำย่อและข้อความเต็ม

AJAX = Asynchronous Javascript and XML

API = Application Program Interface

CSS = Cascading Style Sheet

DOM = Document Object Model

GIS = Geographic Information System

GPS = Global Positional System

HTML = Hyper-Text Markup Language

JSON = JavaScript Object Notation

URL = Universal Reference Locator

XHTML = XML Hyper-Text Markup Language

XML = Extensible Markup Language

ภาคผนวก 4 รวม Link ที่เกี่ยวข้อง กับ Google Maps API และที่มีประโยชน์

Google Maps: http://maps.google.com/

Google Maps API home: http://www.google.com/apis/maps/documentation/reference.html

Signup for API key: http://www.google.com/apis/maps/signup.html

Help and FAQ: http://www.google.com/apis/maps/fag.html

Terms Of Use: http://www.google.com/apis/maps/terms.html

Documentation: http://www.google.com/apis/maps/documentation/reference.html

Official BLOG: http://googlemapsapi.blogspot.com/

API Discussion Group: http://groups.google.com/group/Google-Maps-API

Other resources (tutorial, etc.)

Mapki: http://www.mapki.com/

Mike Williams' tutorial: http://www.econym.demon.co.uk/googlemaps/index.htm

Programmable Web: http://www.programmableweb.com/api/GoogleMaps

Google Maps Mania: http://googlemapsmania.blogspot.com/
 

ตัวอย่างเกี่ยวกับ Map object

• map-simple.html
• map-markers.html
• map-animate.html
• map-infowindow.html

ตัวอย่างเกี่ยวกับ Event

• event-simple.html
• event-context.html
• event-closure.html
• event-arguments.html
• event-bind.html
• event-removal.html

ตัวอย่างเกี่ยวกับ Controls

• control-simple.html
• control-positioning.html
• control-custom.html
• control-localsearch.html
• control-maptypes.html
• control-initialization.html

ตัวอย่างเกี่ยวกับ Marker

• marker-simple.html
• marker-drag.html
• icon-simple.html
• icon-custom.html
• markermanager-weathermap.html
• markermanager-googleoffices.html

ตัวอย่างเกี่ยวกับ Polyline

• polyline-simple.html
• polyline-geodesic.html
• polyline-encoding.html

ตัวอย่างเกี่ยวกับ Polygon, Tile Overlay

• polygon-simple.html
• groundoverlay-simple.html
• tileoverlay-simple.html
• tile-detector.html

ตัวอย่างเกี่ยวกับ Custom Overlay

• overlay-custom.html

ตัวอย่างเกี่ยวกับ Services

• xhr-requests.html
• geocoding-simple.html
• geocoding-extraction.html
• geocoding-cache.html
• geoxml-rss.html
• geoxml-kml.html
• trafficOverlay.html
• directions-simple.html
• directions-advanced.html

[--ไปสารบัญ--]

สงวนลิขสิทธิ์ตามพระราชบัญญัติ (Last edited April 5, 2008)