Category — Google Maps
เมื่อสองสามวันก่อน มี comment ถามมาว่า “อยากทราบว่าสามารถทำ google map บอกระยะทางได้ไหมค่ะ เช่น จากกรุงเทพไปเชียงใหม่เป็นระยะทางเท่าไหร่” ผมก็ตอบไปสั้นๆ วันนี้ขอขยายความเรื่องการหาเส้นทาง และการหาระยะทางจากจุดสองจุดในโดยใช้ Google Maps API ครับ เรื่องนี้เป็นเรื่องที่หลายๆคนสนใจ และเวปใหม่ที่ผมกำลังซุ่มทำอยู่ก็ใช้เยอะมากครับ
ใครอ่านภาษาอังกฤษคล่อง และต้องการข้อมูลแบบละเอียด ผมแนะน ลองอ่าน document ของ Google นะครับ http://code.google.com/apis/maps/documentation/services.html#Directions
เรามาเริ่มกันเลยดีกว่าครับ อ้อ! วิธีการข้างล่างจะเ็ป็นของ API v2 นะครับ เพราะว่าคนส่วนใหญ่คงยังใช้งาน version 2 กันอยู่
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Google Maps JavaScript API Example: Simple Directions</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g"
type="text/javascript"></script>
<script type="text/javascript">
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(13.998, 100.5009), 15);
directions = new GDirections(map);
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606"});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
<br/>
</body>
</html>
source code ข้างบนผมเอามาจาก Tutorial ของ Google ครับ การใช้ GDirection ง่ายมากครับ โดย code ส่วนที่เกี่ยวข้องจริงๆคือบรรทัดที่ 19-20
directions = new GDirections(map);
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606");
บรรทัดที่ 19 เป็นการสร้าง GDirections และระบุว่าให้แสดงเส้นทางใบแผนที่ที่เราสร้างไว้ก่อนหน้านี้
บรรทัดที่ 20 เป็นการเรียกใช้บริการหาเส้นทางจาก Google โดยเราระบุ จุดเริ่มต้นกับปลายทาง
การระบุจุดเริ่มต้นกับปลายทาง สามารถระบุเป็ืนชื่อสถานที่ก็ได้นะครับ แต่ผมว่ามันไม่ค่อยแม่นเนื่องจาก Google ต้องตีความสถานที่ก่อน และระบบ reverse-geocode สำหรับของไทยยังไม่สมบูรณ์ครับ
แค่นี้เราก็จะได้เส้นทางเ็ป็น Polyline บนแผนที่ของเราแล้วครับ
ถ้าต้องการให้ มีข้อความบอกเส้นทางด้วย แบบว่า “ตรงไป 2 กม. แล้วเลี้ยวซ้าย” ก็ทำได้ง่ายๆครับ โดยสร้าง div สำหรับแสดงผลขึ้นมาแล้วระบุตอน new GDirections แบบนี้ครับ
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel );
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606", {locale: 'th'});
ตรง {locale: ‘th’} เป็นการบอกว่าให้แสดงข้อความเป็นภาษาไทยครับ
ดูตัวอย่างการใช้หาเส้นทางจาก Google Maps API http://tanomsak.com/tutorial-7.html
Update: ตัวอย่างสำหรับกรณีมีจุดหมายสองจัดครับ http://tanomsak.com/tutorial-7_1.html
ถ้าผมอธิบา่ยตรงไหนไม่เข้าใจ แนะนำได้ใน Comment เหมือนเดิมนะครับ
เมื่อเช้าตื่นขึ้นมาเจอ tweet ของ sebprovencher เรื่อง Google Maps เปลี่ยนหน้าตา (จริงผมว่าเพิ่มข้ิิอมูลถนนมากกว่า) กับ เรื่องที่มีการคาดการว่า Google จะให้บริการ Navigator ซึ่งผมคิดว่ามีแนวโน้มมาก และคิดว่า Google น่าจะทำได้ดีด้วยเพราะที่ผ่านมาผมใช้บริการ Direction ของ Google ตลอดและทำได้ดีมาก ถ้ารวมกับข้อมูลถนนที่เพิ่มใหม่คงจะออกมาเป็นบริการที่ดีมากๆ
ถ้าใครเคยเข้าไปเวป ddproperty.com จะเห็นว่าปุ่มซูมเข้าซูมออกจะไม่เหมือนแบบปกติของ Google Maps และมีปุ่มย่อขยายแผนที่เพิ่มขึ้นมาด้วย การทำแบบนี้เค้าเรียกว่า Custom Control ครับ
คราวนี้เราจะพูดถึงเรื่องการสร้าง Control ของ Google Maps ให้เป็นแบบเฉพาะของเวปเรากันครับ
คิดว่าหลายๆคนคงจะรู้จัก Google Static Maps API กันบ้างนะครับ ตัว Static map จะเป็นรูปแผนที่ Google Maps แบบที่เป็นรูปภาพนิ่ง คือไม่สามารถลากเพื่อเปลี่ยนที่ และไม่สามารถว่าซูมเข้าออกได้ ประโยชน์ของมันก็คือโหลดเร็วเพราะว่าเป็นรูปภาพรูปเดียว เหมาะสำหรับการแสดงตำแหน่งแค่คร่าวๆ เพราะบางครั้งแผนที่ไม่ใช้ส่วนสำคัญในหน้าเวป จะได้ไม่ต้องเสียเวลาโหลดตัว API นานๆครับ
Google Static Maps มีการสนับสนุนการแสดงหมุดด้วยครับ แต่ว่าหมุดมันจะเป็นชุดมาตราฐานซึ่งอาจจะไม่เข้ากับเวปอันแสนสวย(??) ของเราเท่าไหร่ จะใช้วิธีการเปลี่ยนรูปหมุดใน Google Maps ที่แนะนำไปแล้วก็ไม่ได้ เนื่องจากแผนที่เป็นรูปภาพไม่ได้สร้างจาก Javascript API
และนี่เป็นหัวข้อของผมในวันนี้ครับ คือการ การทำ Custom marker icon สำหรับ Google Static Maps ผมพบวิธีนี้จากเวป Yelp.com ตอนที่เค้าเปลี่ยนมาใช้ static map ครับ [Read more →]
หลังจากหายหน้าไปนาน ขอต่อเรื่อง Google Maps ด้วยการใช้รูปภาพแทนหมุดกันครับ ถ้าจะค้นหาบทความเพิ่มเติม ลองค้นคำว่า Custom Marker Icon นะครับ เรามาเริ่มเรื่องของเรากันเลยดีกว่า
สังเกตุไหมครับว่าจากตัวอย่างที่ผ่านๆมาทั้งหมด หมุดของเราเป็นหมุดแดงๆ แล้วมีจุดดำๆตรงกลาง ซึ่งเป็นมาตรฐานของ Google Maps เค้า บา่งทีมันอาจดูไม่เนียน ไม่เข้ากับเวปเราเท่าไหร่ สามารถเปลี่ยนได้นะครับ โดยใช้ Customer Marker Icon วิธีกา่รไม่ยากครับ ผมว่าที่ยากที่สุดก็ตรงทำรูป Icon ที่ดูดีอย่างที่ต้องการมากกว่า (ของ ddproperty.com ผมกับเพื่อน ก็ดูแบบจากหลายๆที่มารวมๆกัน ซึ่งทำนานกว่าเขียน script อีก)
เพิ่มหมุดจาก Google Maps ลง Database
ในเวป ddproperty.com ที่ผมกับเพื่อนดูแลอยู่เนี้ย เราให้คนที่ลงประกาศทุกคนต้องระบุตำแหน่งด้วยว่า อสังหาฯที่กำลังลงประกาศตำแหน่งอยู่ตรงไหน ผมก็ใ้ช้ google maps นี้แหละครับในการระบุตำแหน่ง
คราวนี้เราจะมาดูกันว่า จะใช้ Google Maps เพิ่มตำแหน่งหมุดใน Database ยังไง [Read more →]
ความเดิมจากตอนที่แล้ว เราพูดถึงวิธีิการแสดงหมุดจาก database บนแผนที่ Google Maps ไปแล้ว แต่ติดตรงที่ว่าเวลามีหมุดเยอะๆจะแสดงหน้าเวปช้า และเปลือง memory คราวนี้ผมจะพูดถึงการใช้วิธีการแสดงหมุดจาก database เฉพาะส่วนที่มองเห็นในหน้าต่างแผนที่โดยการใช้ AJAX ครับ
ส่วน table database และ ข้อมูลใน database ก็ใช้ของคราวที่แล้วครับ (ดูได้ที่ Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps)
สิ่งที่ต้องเตรียมก่อนเริ่ม
- ผมใช้ Prototype Javascript Framework สำหรับทำ AJAX เพราะมันติดมากับ Rails เลยชินครับ ถ้าใครถนัดตัวอื่นก็ตามสะดวก
- แนะนำ Firefox + Firebug สำหรับการ Debug ครับ สุดยอดมากๆ
หลักกาำรทำงาน
- ทุกครั้งที่มีกา่รเลื่อนแผนที่ หรือซูมเข้า/ซูมออก script จะขอข้อมูลจาก server และนำไปแสดงจุดพิกัดใหม่ในแผนที่
- ใช้พิกัดของแผนที่ ที่กำลังแสดงผล (x1,y1,x2,y2 ตรงมุมกรอบของแผนที่) เป็นตัวแปลในการเลือกข้อมูลพิกัดจาก database [Read more →]
จากคราวก่อนที่เราทดลองใช้ Google Maps API แสดงแผนที่ในหน้าเวปของเราไปแล้ว (อ่าน Tutorial แบบบ้านๆ ตอนที่ 1) คราวนี้มาต่อตอนที่ 2: เพิ่มและแสดงหมุดใน Google Maps กันครับ
ประโยชน์ของการใช้ Google Maps API แสดงแผนที่ก็คือเราสามารถแสดงหมุด จากข้อมูลใน database ของเราเองได้ คราวนี้เราจะทดลองสร้าง interface ให้ปักหมุด จัดค่าพิกัดใน database และนำข้อมูลจาก database กลับมาแสดงครับ
สิ่งที่ต้องเตรียมก่อนเริ่ม
- Database server สำหรับเก็บข้อมูลพิกัด (ผมใช้ MySQL v5.0)
- Web Server สำหรับประมวลผลและติดต่อ database จะใช้อะไรก็ตามสะดวกครับ (ผมเขียน server side ด้วย Rails ครับ ขอใช้ตัวอย่างเป็น Rails นะครับ)
ขั้นตอนที่ 1 มารู้จักวิธีการแสดงหมุดบนแผนที่ด้วย Google Maps API กันก่อน
หมุดที่แสดงบนแผนที่ Google Maps จะเรียกว่า Marker ครับ โดยการจะแสดงหมุดบนแผนที่นั้น ก็ต้องสร้าง Marker ขึ้นมาก่อน แล้วก็ทำการเพิ่ม Marker ที่สร้างมาลงบนแผนที่ ลองดูจาก script นะครับ
ตอนผมทำเวป 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 แบบลอยนอกแผนที่
- แล้วแต่จะคิดออกต่อๆำไปครับ
