ได้รับ email ฉบับหนึ่งที่ถามถึงการพัฒนา Internet GIS Application ด้วย Google Map โดยมีประเด็นที่น่าสนใจตรงที่ท่านนี้อยากให้เปรียบเทียบข้อดี ข้อเสียเกี่ยวกับการพัฒนาแบบที่ใช้ MapServer ของตัวเอง กับการใช้ API Service เช่น Google Map ผมตอบไปทาง email ค่อนข้างยาว แต่ผมอยากของสรุปแนวคิดการเลือกใช้ว่าขึ้นอยู่กับความต้องการของระบบ ผมเองก็ใช้ทั้งสองประเภท บางงานก็ใช้ผสมกัน แต่สิ่งหนึ่งที่ Google Map มีคือข้อมูลเชิงพื้นที่ ทั้งถนน , ภาพถ่ายดาวเทียม ซึ่งค่อนข้างละเอียด สามารถลดภาระการบำรุงรักษาข้อมูลของเราได้ นอกจากนี้ google map ยังใช้งานได้ง่ายและมีแนวโน้มที่จะพัฒนาต่อไปอีก เช่น ฟังก์ชั่นการวิเคราะห์เส้นทาง เป็นต้น แต่ก็มีข้อจำกัดอยู่บ้าง Application ที่ไม่ซับซ้อนมากนักผมมักจะใช้ Google Map เป็นหลัก

         เนื่องจากหลายๆท่านสนใจแต่อาจจะไม่ทราบว่าจะเริ่มต้นยังไง ดังนั้นในหัวข้อ basic google map I จะสอนการสร้าง application อย่างง่ายเพื่อใช้เป็นแนวทางสำหรับเริ่มต้นครับ

1. บทนำ

        Google Map API เป็นระบบบริการข้อมูลแผนที่ผ่านอินเตอร์เน็ต ที่นักพัฒนาสามารถนำข้อมูลมาใช้ในการพัฒนา application ในรูปแบบ Web based ต่อได้ โดยอาศัยความรู้พื้นฐานหลักได้แก่ JavaScript OOP, AJAX, XML(DOM), HTML และที่สำคัญที่สุดคือเรื่องของ ระบบพิกัดภูมิศาสตร์นิดหน่อย การทำงานเริ่มจากการขอรับบริการ โดยไปลงทะเบียนเพื่อสร้าง API Key ก่อนที่ http://code.google.com/apis/maps/signup.html การลงทะเบียนต้องใช้ web site URL

ตัวอย่าง Key

key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA

2. Basic Google Map

     ทดลองเริ่มเขียน code ง่ายเพื่อเรียกข้อมูลแผนที่มาแสดง โดยมี code ดังต่อไปนี้ครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

  <head>

    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

    <title>Google Maps JavaScript API Example</title>

<!– Embed API Key–>

    <script src=”http://maps.google.com/maps?file=api&amp;v=2&#8243;

            type=”text/javascript”></script>

    <script type=”text/javascript”>

    //<![CDATA[

    function load() {

      if (GBrowserIsCompatible()) {

       // กำหนด DIV tag สำหรับ Map โดยเข้าถึงแบบ DOM

        var map = new GMap2(document.getElementById(“map”));

      // Add Map Control และ Map Type

        map.addControl(new GSmallMapControl());

        map.addControl(new GMapTypeControl());

    // กำหนด ค่าพิกัดของตำแหน่งเริ่มต้นบนแผนที่ 

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

      }

    }

    //]]>

    </script>

  </head>

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

    <div id=”map” style=”width: 500px; height: 300px”></div>

  </body>

</html>

Upload ไฟล์ Html ที่เขียนขึ้นบน Server แล้วทดลองทำการ Run ผลลัพธ์

9.jpg