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

ตัวอย่างการนำ GoogleMap API ไปใช้พัฒนา Application ขั้นสูงที่ต้องเขียนโปรแกรม

 

        นับเป็นโชคดีอย่างหนึ่งครับ GoogleMap นั้นมีช่องทางการ share map ที่น่าสนใจอยู่ ซึ่งเราสามารถนำช่องทางนี้มาใช้งานได้ เช่นเดียวกับ การ share ไฟล์ภาพเคลื่อนไหวของ youtube ซึ่งวันนี้จะทดลองสร้าง Web Map Application อย่างง่ายจาก google map โดยเริ่มจาก

       1. สมัครใช้บริการของ GMAIL คือต้องเป็นสมาชิคของ google เสียก่อนจึงสามารถจะใช้งาน google map ได้ สำหรับท่านที่เป็นสมาชิกหรือมี account ของ gmail อยู่แล้วก็สามารถเข้าไปช้งานได้เลยโดยไปที่ http://maps.google.com/

 

 รูปที่ 1 เข้าสู่หน้าหลักของ map.google.com

รูปที่ 2 log-in เข้าสู่ระบบ

         2. click แท็บแผนที่ของฉัน แล้วทำการสร้างแผนที่ใหม่

        3. ทำการกำหนดรายละเอียดเบื้องต้น และ title ของชั้นแผนที่ที่จะสร้างดังภาพ

         4. ลงมือสร้างข้อมูลแผนที่ของท่านที่ต้องการ โดยใช้แถบเครื่องมือ Editor บนแผนที่ด้านซ้าย

รูปต้วอย่าง ผมสร้างชั้นข้อมูลจุดและโพลีกอน ของอาคารบริเวณที่ทำงานและกรอกรายละเอียดข้อมูลเชิงบรรยายลงในแต่ละ feature

         5. กรณีท่านที่ทำการเก็บข้อมูลจาก GPS หรือมีข้อมูล KML อยู่แล้วให้ click ที่เมนูนำเข้าดังภาพแล้วทำการ upload KML ไปยัง server ของ Google เพื่อสร้างชั้นข้อมูล

ภาพแสดงการ Upload KML ไปยัง server ของ Google

         6. กดปุ่มเสร็จสิ้น เพื่อบันทึกข้อมูลที่สร้าง

        7. ทำการ save code สำหรับใช้ embed ในหน้า webpage โดยไปที่เมนูลิงค์มาที่นี่ บนขวามือ และ copy code

          8. เอา code ส่วน <iframe> ไปแปะบน page โดยกำหนดขนาด width และ height ตามเหมาะสมครับ เท่านี้ก็เสร็จแล้ว

ภาพผลลัพธ์แผนที่ google map ที่ได้ครับ

บทความอื่นๆที่เกี่ยวข้อง

https://emap.wordpress.com/2008/04/02/basic-google-map-i/
https://emap.wordpress.com/2008/04/04/basic-google-map-ii/ 
https://emap.wordpress.com/2008/04/09/basic-google-map-iii/