Tutorial แบบบ้านๆ ตอนที่ 1 – Basic Google Maps API
ตอนผมทำเวป ddproperty.com อยากจะเอา Google Maps มาใช้ระบุตำแหน่ง ก็เลยหาข้อมูลจากหลายๆที่ ทั้งดูตัวอย่างจากเวป แล้วก็หาอ่านจาก เอกสารของ google และ Google Maps Tutorial รวมถึงเอกสาร การใช้ Google Maps API ที่ รองศาสตราจารย์สวัสดิ์ชัย เกรียงไกรเพชร รวบรวมไว้ซึ่งละเอียดมากๆ ถ้าใครต้องการเนื้อหาแบบละเอียดๆ ก็ลองอ่านดูได้จาก link ข้างต้นไม่ผิดหวังครับ
แต่ที่ผมจะเขียนนี้ขอเป็น Google Maps Tutorial แบบบ้านๆ รวบรวมเฉพาะส่วนที่ผมใช้เป็นหลักในเวป ddproperty.com โดยจะแบ่งเป็นตอนๆแบบนี้ครับ
- Basic Google Maps API
- แสดงหมุดจาก database ใน Google Maps
- แสดงหมุดจาก database ใน Google Maps ด้วย AJAX
- เพิ่มหมุดใน database
- ใช้รูปภาพแทนหมุด (Custom Marker Icon)
- การทำ Custom marker icon สำหรับ Google Static Maps
- ใช้รูปภาพแทนปุม control (Custom Control)
- สร้าง info windows แบบลอยนอกแผนที่
- แล้วแต่จะคิดออกต่อๆำไปครับ
ออกตัวเสร็จแล้วก็เริ่มตอนที่ 1 กันดีกว่า
ในการจะนำ Google Maps มาใส่ในเวปของเราเนี้ยจริงๆแล้วมันมีได้ 2 แบบคือ
- แบบที่ใช้บริการจำพวก My maps ของ Google แบบนี้ใช้งานง่ายมากแค่แปะ link ในหน้า source code ของเวปก็แสดงแผนที่ได้แล้ว (แนะนำหนังสือ Google Maps มหัศจรรย์แผนที่ออนไลน์ ครับ) แต่ว่ามีข้อจำกัดในการทำลูกเล่นต่างๆและ ไม่สามารถแสดงข้อมูลที่อยู่ใน database ของเราเองได้
- กับแบบที่แสดงแผนที่โดยใช้ Google Maps API จะสามารถปรับหน้าตาแผนที่ได้ และจะสามารถแสดงหมุดจาก database ของเราเอง หรือเพิ่มหมุดลงใน database ก็ได้ครับ
ที่ผมกำลังจะเขียนถึงเป็นแบบที่สอง คือ Google Maps API ครับ
ขั้นตอนที่ 1: ขอใช้ API Key สำหรับใช้งาน Google Maps
ขั้นแรกก็ต้องขอ API Key จาก Google ก่อนครับ โดยทำได้ง่ายมากๆ แค่มี account ของ google (ก็ account gmail นั้นแหละครับ) ก็เป็นอันใช้ได้ โดยไปที่ http://www.google.com/apis/maps/signup.html พออ่าน Term of Service จบแล้ว ก็ใส่ domain name ของเวปเรา ที่จะใช้ Google Maps API ในกล่้อง My web site ตามรูปครับ
เช่นถ้าจะใช้ Google Maps API กับเวป ddproperty.com ก็ใส่ http://www.ddproperty.com ลงไปจะทำให้สามารถใช้ Google Maps API กับทุกๆหน้าภายใตั domain www.ddproperty.com ได้ (sub domain ไม่ได้นะครับ ต้องขอ API key อันใหม่)
ในช่วง development ที่ยังไม่ได้จด domain ก็ใส่ http://localhost/ ไปได้เลยครับ แล้วก็เข้าหน้าทดสอบผ่านทาง url localhost เอา
สามารถขอได้หมายๆอันนะครับ ไม่ต้องกลัวหมด 
ผมขอมาทดลองหลายอันแล้ว
ขั้นตอนที่ 2: แปะ script สำหรับ Google Maps API และเรียกใช้งาน
พอกด Generate API Key ในขั้นแรกแล้วก็จะได้ API Key มา พร้อมด้วยตัวอย่างการนำไปใช้ในเวปของเราตามรูปข่างล่าง
จริงๆแล้วเจ้า Google Maps API เนี้ยมันก็คือ javascript functions ชุดนึงที่ Google เขียนขึ้นเพื่อให้เราเรียกใช้เพื่อสร้างแผนที่ในเวปเรา จากตัวอย่างที่ได้มาจากการสร้าง API Key จะเห็นได้ว่าการเรียกใช้งาน Google Maps API เนี้ยแบ่งเป็น 4 ส่วนใหญ่ๆครับ
- การ include Google Maps API (external javascript จาก google) เข้ามาในหน้าเวปเรา ตาม script ข้างล่างโดย v=2 หมายถึง API version 2 ซึ่งเป็นเวอร์ชั่นหลักในปัจจุบัน และ key=api_key ก็คือค่า API Key ของเราถ้าพัฒนาเสร็จแล้วก็ไปขอ API Key ใหม่โดยใช้ domain name ของจริงแล้วก็นำมาแทนที่ตรงนี้ครับ
- เขียน javascript เพื่อเรียกใช้งาน Google Maps API จาก script จะเห็นการเรียก function GBrowserIsCompatible() เพื่อเป็นการตรวจสอบว่า browser รองรับหรือเปล่าก่อนจะสร้าง object map อันนี้เป็น pattern ในการเริ่มสร้าง map เลยครับ ที่อยากให้สังเกตุอีกอันนึงคือ GMap2(document.getElementById(“map”)); parameter ที่ใช้ในการสร้าง object GMap2 เป็นชื่อของ DIV Element ที่จะให้ google ใช้เป็นพื้นที่ของแผนที่
- ต่อไปก็เป็นส่วนเรียกใช้ function load() ที่เขียนเอาไว้ โดยจากตัวอย่างของ Google เค้าเขียนง่ายๆ โดยการผูกกับ Event onload ของ Page body ส่วน GUnload() ที่ผูกไว้กับ Event onunload เป็น function ของ Google Maps ครับ เอาไว้ release memory ป้องกันพวก memory leak ประมาณนั้น ใส่ไว้กันเหนียว
- จาก script ในข้อ 3 อยากให้สังเกตุ DIV Element ที่มี id=”map” ครับ พื้นที่ตรงนี้แหละครับที่จะถูกแสดงแผนที่ ตามที่เรากำหนดไว้ใน function load() ในส่วนที่ 2 เราสามารถกำหนดขนาดเล็กใหญ่ของแผนที่ได้ โดยกำหนด style ให้กับ DIV Element อันนี้ครับ
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQKXEKxoc7nW6rPe_Qv-bqip6q6Kw" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
// ]]></script>
เท่านี้ก็เป็นอันเสร็จการเพิ่มแผนที่ Google Maps เข้าไปในเวปของเราแล้วครับ ลองดูผลงานจากตัวอย่าง เขียนไปเขียนมาทำไมมันยาวจัง แล้วตอนต่อไปมันจะยาวขนาดไหนเนี้ย
ผมเขียนแล้วอ่านรู้เรื่องไหมครับ แนะนำและแสดงความคิดเห็นใน comment นะครับ แล้วจะนำไปปรับปรุงสำหรับตอนต่อๆไปครับ
Pingback: การหาเส้นทางโดย Google Maps API (GDirection) — tanomsak.com