เมื่อสองสามวันก่อน มี 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
ถ้าผมอธิบา่ยตรงไหนไม่เข้าใจ แนะนำได้ใน Comment เหมือนเดิมนะครับ
Form Design
วันนี้จัดการ uninstall โปรแกรม Nokia PC Suite ที่ลงไว้ตอนย้าย Contact จากโทรศัพท์ฺเึครื่องเก่า ทำให้นึกอะไรขึ้นมาได้อย่างนึงคือ install wizard ของ Nokia ใช้งานยากมาก จริงๆรู้สึกตั้งแต่ตอนติดตั้งแล้ว แต่พอ uninstall ทำให้นึกขึ้นมาได้ ลองดูรูปนี้ครับ
เข้าใจว่าคงตั้งใจเปลี่ยนปุ่ม “ตกลง”,”ยกเลิก” ให้สวย โดยแทนที่ด้วยเครื่องหมายถูกผิดแทน ผลคือผมงงมากครับ ไม่รู้จะกดปุ่มไหนดี พอหันขึ้นไปอ่าน คำอธิบายข้างบน ก็อ่้านไม่เข้าใจอีก สุดท้ายเสียเวลาไปหลายนาที
การออกแบบ interaction ระหว่างคนกับโปรแกรมสำคัญมากๆ เรื่องเล็กๆน้่อยๆบางเรื่อง อาจทำให้งานง่ายกลายเป็นงานยากได้ครับ
@LukeWDesign เขียน “Web Form Design: Filling in the Blanks” ไว้ได้มีประโยชน์มากครับ หรือลองอ่าน presentation ของเค้าที่ http://www.lukew.com/ff/entry.asp?964 ดูครับ
เอาไว้ปีนี้จะลองหยิบประเด็นเด่นๆในหนังสือมาเล่าให้ฟังนะครับ สลับกับ Google Maps API บ้างเพราะเริ่มหมดมุขแล้วครับ
สวัสดีปีใหม่ 2010 ครับ
รีวิว The Zign พัทยา
เสาร์อาทิตย์นี้มาพักผ่อนที่พัทยากับ @pangporn เลือกมาพักที่ The Zign เพราะโทรไปทีี่อื่นๆ ที่ซื้อไว้ตอนงานไทยเที่ยวไทยแล้วเต็มหมดเลย เลยลองใช้บริการ allresortthailand.com เป็นครั้งแรก ตอนแรกจะเลือกจองห้องแบบถูกที่สุดคือห้องแบบ City View (ราคาในเวป 2,2xx บาท) แต่ระบบแจ้งว่าเต็มเลยได้ห้อง Sea View มาแทนที่ราคา (2,7xx บาท)
โรงแรม The Zign อยู่ที่ นาเกลือซอย 12 เข้ามาไม่ไกลก็จะเห็นโรงแรมเพราะว่าใหญ่มาก
เรามาถึงโรงแรมตอนบ่ายโมง ทาง reception ก็จัดห้องให้โดยไม่ต้องรอถึงเวลา check-in คือบ่ายสอง แต่งานนี้เปลี่ยนห้องไป 2 ครั้งกว่าจะได้ห้องที่ถูกใจ เพราะว่าสองห้่องแรกอยู่ชั้น 3 เหม็นกลิ่นบุหรี่เลยขอย้าย เค้าก็ช่วยจัดแจงให้อย่่างดี จนได้ห้องชั้น 5 เสียอย่างเดียวชั้น 5 ไม่มี WIFI เพราะ Access Point อยู่ตรงชั้น 3 แต่ก็มี LAN ให้ใช้แทน โดยขอสาย LAN ได้ที่ reception (มัดจำ 100 บาท)
ห้องพักตกแต่งสวยดีเพราะเราย้ายห้องหลายครั้งเลยได้รูปมาให้ดูสองห้องเลยครับ
ห้องแรก อยู่ชั้น 3 ครับ
นี่รูปห้องสุดท้าย อยู่ชั้น 5 สวยไปอีกแบบ
อันนี้บรรยากาศในห้องชั้น 5 ที่เราได้อยู่
สระว่ายน้ำมีสองสระ แต่วันที่มากำลังปิดปรับปรุง 1 วัน เลยแน่นไปนิดนึง ส่วนใหญ่แขกเป็นครอบครัว เด็กๆเลยเยอะหน่อย
อาหารเช้าเป็นแบบ Buffet อาหารเยอะมากๆ แต่คนก็เยอะเหมือนกัน บรรยากาศคล้ายๆ ที่ รามายานะ บุฟเฟ่ต์ เลยแบบว่าแน่นๆ รสชาติอาหารส่วนใหญ่ OK ลองดูรายการอาหารใน video ข้างล่างดูครับ ผมว่าิเยอะว่าที่ Evason หัวหินอีก (แต่คุณภาพไม่เท่า)
ก่อนกลับลองถาม Reception ดูเห็นว่าราคาห้องแพงกว่าในเวปอยู่เกือบเท่าตัวครับ ขนาดเป็นราคาที่ลด 40% แล้วก็ตาม เลยคิดว่าวันหลังคงได้ใช้บริการจองจากทางเวปอีก
โดยรวมถือว่าชอบที่นี้ ถึงราคาจะแพงนิดแต่บรรยากาศ OK มาก หวังว่าจะช่วยเพื่อนๆที่คิดจะไปพักที่นี้ตัดสินใจได้นะครับ ใครไปมาแล้วแชร์ให้ฟังกันบ้างนะครับ
ปล. สรุปแทบไม่ได้ดูทะเล นอกจากออกมาถ่ายรูปทีี่ระเบียง คราวหลังจอง City View ก็คงไม่ต่างกันเก็บตังไปกินลุงไสวดีกว่า
อาหารเช้าที่ the zign
อาหารเช้าอลังการมาก อาหารเยอะ คนก็เยอะ รสชาติถือว่า ok เลย
เมื่อเช้าตื่นขึ้นมาเจอ 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 →]
ไปบ้านเด็กพิการตาบอดซ้ำซ้อนที่รามอินทรา
วันนี้โำพสบล๊อกใหม่ที่ blog.ddproperty.com หลังจากทิ้งไปนานไม่ได้ update เลยครับ
ตั้งแต่เริ่มเวป www.ddproperty.com @pangporn มีความคิดว่าอยากแบ่งเงินที่ได้จากเวปไซด์ไปบริกาคและทำบุญ วันก่อนได้มีโอกาสแวะไปที่บ้านเด็กพิการตาบอดซ้ำซ้อนรามอินทรา เคยไปมาครั้งนึงนานแล้วยังไม่ใหญ่โตขนาดนี้ ตอนนี้มีการสร้างตึกใหม่โหญ่โตมาก (จนอดคิดไม่ได้ว่า ใหญ่ไปเปล่าครับ)
เคยได้ยินไหมครับว่า ชาเขียวถูกน้ำเสนอเพื่อเป็นตัวเลือกให้คนที่ ไม่ชอบอยากดื่มน้ำเปล่า แต่ก็ไม่ชอบน้ำอัดลม เมื่อวานแวะไปทานข้าวที่ ม. เกษตร มาครับ (จริงๆผมกับ @pangporn ก็ไปเกษตรบ่อย เนื่องจากเรารักเกษตรครับ 
ทั้งๆที่ก็จบมาจะ 9 ปีแล้ว) ผมก็สังเกตุเห็นเรื่องที่จะเอามาเล่าวันนี้แหละครับ .. น้ำใบเตย
หลังจากหายหน้าไปนาน ขอต่อเรื่อง Google Maps ด้วยการใช้รูปภาพแทนหมุดกันครับ ถ้าจะค้นหาบทความเพิ่มเติม ลองค้นคำว่า Custom Marker Icon นะครับ เรามาเริ่มเรื่องของเรากันเลยดีกว่า
สังเกตุไหมครับว่าจากตัวอย่างที่ผ่านๆมาทั้งหมด หมุดของเราเป็นหมุดแดงๆ แล้วมีจุดดำๆตรงกลาง ซึ่งเป็นมาตรฐานของ Google Maps เค้า บา่งทีมันอาจดูไม่เนียน ไม่เข้ากับเวปเราเท่าไหร่ สามารถเปลี่ยนได้นะครับ โดยใช้ Customer Marker Icon วิธีกา่รไม่ยากครับ ผมว่าที่ยากที่สุดก็ตรงทำรูป Icon ที่ดูดีอย่างที่ต้องการมากกว่า (ของ ddproperty.com ผมกับเพื่อน ก็ดูแบบจากหลายๆที่มารวมๆกัน ซึ่งทำนานกว่าเขียน script อีก)
