การใช้รูปภาพแทนปุ่มซูมเข้าออก (Custom control)
ถ้าใครเคยเข้าไปเวป 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 แทน ผมทดลองแล้วตามแล้วลองดูตัวอย่างนะครับ
