มีผลการค้นหาตั้ง 49 ล้านหน้า ไหงหน้าแรก มันเหมือนกันหมดเลยอ่ะ เห้อ

1. Google นำเสนอ Instant Preview เพื่อพยายามกดดันเวปต่างๆให้คิดถึง Design และ User Experience ให้มากขึ้น เหมือนกับที่เพิ่งจะเอาความเร็วในการเปิดเวป เข้ามาเป็นตัวแปรในการ Ranking ผลการค้นหา แน่นอนว่าการตัดสินใจต่างๆของ Google จริงๆแล้ว ก็มีเป้าหมายเพื่อรายได้ที่มากขึ้น เช่นถ้าเปิดเวปเร็วขึ้น ก็มีโอกาศได้แสดง AdSense มากขึ้น และ Google เองก็มีโอกาศได้รายได้จาก AdWords เพิ่มขึ้นไปด้วย
2. ปัจจุบันพฤติกรรมของผู้ใช้งาน Internet ยังเป็นแบบ trial and error คือ Click เข้าไปดูก่อน ถ้าไม่ใช่ที่ต้องการก็ Back กลับ ซึ่งบ่อยครั้งที่การทำ SEO โดยไม่นึกถึง User Experience หรือการอัด AdSense ซะเต็มหน้าทำให้ผู้ใช้งาน ต้องเข้าๆออกๆเวปเป็นจำนวนมาก โดยที่ไม่เจอหน้าที่ต้องการ ถ้ามองในแง่นี้ Google Instant Preview ก็ดูสมเหตุสมผล เข้ากับทิศทางการหารายได้ของ Google ที่ต้องการให้มีเวป “คุณภาพ” เยอะๆ
   
   (รูปประกอบจากหนังสือ Don’t Make Me Think)
3. แต่จากการทดลองใช้ Google Instant Preview ผมคิดว่า มันยังทำงานช้าเกินที่ เรียกว่าช้าเกินกว่าที่จะมี Impact กับการตัดสินใจ Click คือผมคงไม่รอ 0.5 – 1 วินาที เพื่อให้ Preview แสดง ก่อนจะตัดสินใจกด Link เพราะว่าแต่ละหน้ามีผลการค้นหา 10 อัน การ Scan แล้ว Click น่าจะสอดคล้องการรูปแบบการใช้งานมากกว่า รอ Preview ทีละอัน
4. ที่สำคัญอีกข้อนึงคือ Preview มันบัง Ads ด้านขวามือครับ ลองดูผลการค้นหาคำว่า “บ้านมือสอง” ข้างล่างครับเห็นไหมครับ ว่า Preview บัง Ads ทำให้คิดว่า Google ต้องมีการปรับรูปแบบ Preview แน่นอนในอนาคตอันไม่ไกล
5. ส่วนตัวผมชอบที่ Web Design จะมีผลมากขึ้น เพราะโดยรวมเราน่าจะมีเวปที่มีคุณภาพมากขึ้น แต่ผมยังไม่ชอบ Google Instant Preview เนื่องจากมันทำงานช้าเกินไป และทำ Interaction ระหว่างผู้ใช้งานและ Google ช้าขึ้น ผมเลยไม่แน่ใจว่าเจ้า Google Instant Preview จะอยู่รอดไปนานแค่ไหนครับ

ถ้าใครเคยเข้าไปเวป 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 แทน ผมทดลองแล้วตามแล้วลองดูตัวอย่างนะครับ

ตั้งแต่เริ่มเวป www.ddproperty.com @pangporn มีความคิดว่าอยากแบ่งเงินที่ได้จากเวปไซด์ไปบริกาคและทำบุญ วันก่อนได้มีโอกาสแวะไปที่บ้านเด็กพิการตาบอดซ้ำซ้อนรามอินทรา เคยไปมาครั้งนึงนานแล้วยังไม่ใหญ่โตขนาดนี้ ตอนนี้มีการสร้างตึกใหม่โหญ่โตมาก (จนอดคิดไม่ได้ว่า ใหญ่ไปเปล่าครับ)

พอเข้าไปข้างในก็เย็นสบายดี ตอนที่พวกผมเข้าไปมีคนมาบริจาคอยู่ประมาณ 3 กลุ่ม และก็มีคนทยอยมาเรื่อยๆไม่ขาดสาย น่าดีใจจริงๆ

มีของขายด้วยนะครับ พวกของที่ระลึก และเสื้อน่ารักๆ

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