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

หายหน้าหายตาไม่ได้อัพเดท blog ซะนานเนื่องจากช่วงที่ผ่านมา 2-3 เดือนยุ่งมากๆกับเรื่องานแล้วก็เรื่องเตรียมตัวแต่งงานครับ ตอนนี้งานแต่งงานผ่านไปเรียบร้อยครับผม

กลับมาคราวนี้ตั้งใจว่าจะเขียนเรื่องอื่นๆนอกจากเรื่องเขียนโปรแกรมมั้ง แบบว่าเจออะไรก็เขียนเล่าให้ฟัง มีอะไรแนะนำก็พูดคุยกันนะครับ ขอตัวไปจัดการ blog ที่ดองเอาไว้ก่อนนะครับ