จัดรูปแบบ ScaleControlOptions ใน Google Map
12 September 2010ส่วนของ ScaleControlOptions คือส่วนที่แสดงสเกลอัตราส่วนของแผนที่ โดยปกติจะไม่แสดง และถ้าต้องการ
แสดงต้องกำหนดใน option ของ map ให้เป็น scaleControl:true, ตำแหน่งเริ่มต้นเมื่อแสดง scaleControl จะอยู่
มุมล่างด้านซ้ายต่อหลังจากโลโก้ของ Google การจัดการในส่วนของ ScaleControlOptions นี้ ทำให้เราสามารถกำหนด ตำแหน่ง และ รูปแบบได้
ตำแหน่งต่าๆ งประกอบไปด้วย
ภาพประกอบจาก Google
BOTTOM แสดงชิดขอบล่างตรงกลาง
BOTTOM_LEFT แสดงชิดขอบล่างด้านซ้ายต่อหลังจากโลโก้ของ Google
BOTTOM_RIGHT แสดงชิดขอบล่างด้านขวาก่อนคำว่า copyrights
LEFT แสดงชิดขอบข้างด้านซ้ายอยู่ใต้ส่วนอื่นที่ชิดขอบบนซ้ายลงมา
RIGHT แสดงชิดขอบข้างด้านขวาอยู่ใต้ส่วนอื่นที่ชิดขอบบนขวาลงมา
TOP แสดงชิดขอบบนตรงกลาง
TOP_LEFT แสดงชิดขอบบนด้านซ้ายขยับออกจากแนวตรงกลาง
TOP_RIGHT แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง
รูปแบบของ ScaleControlOptions มีเพียงรูปแบบเดียวจะกำหนด หรือไม่กำหนดก็ได้
DEFAULT แสดงสเกลอัตราส่วนของแผนที่ แบบมาตรฐาน
ส่วนที่ใช้ในการจัดตำแหน่ง ScaleControlOptions และรูปแบบ style ในโค้ด
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
scaleControl:true, // กำนหนดให้แสดงสเกลอัตราส่วน ในแผนที่
scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่
position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง
style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
คลิกดูผลลัพธิ์ การจัดตำแหน่ง และรูปแบบต่างๆ
ตัวอย่างโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:650px;
height:400px;
margin:auto;
margin-top:50px;
}
.mybtTest{
border:1px solid #999;
background-color:#000;
color:#FFF;
font-weight:bold;
font-size:10px;
}
.mybtTest2{
border:1px solid #009;
background-color:#069;
color:#FFF;
font-weight:bold;
font-size:10px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div style="width:650px;text-align:left;margin:auto;">
<br />
<button class="mybtTest">BOTTOM</button>
<button class="mybtTest">BOTTOM_LEFT</button>
<button class="mybtTest">BOTTOM_RIGHT</button>
<button class="mybtTest">LEFT</button>
<button class="mybtTest">RIGHT</button>
<button class="mybtTest">TOP</button>
<button class="mybtTest">TOP_LEFT</button>
<button class="mybtTest">TOP_RIGHT</button>
<hr />
<button class="mybtTest2">DEFAULT</button>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var infowindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// ตำแหน่งต่างประกอบไปด้วย
// BOTTOM แสดงชิดขอบล่างตรงกลาง
// BOTTOM_LEFT แสดงชิดขอบล่างด้านซ้ายต่อหลังจากโลโก้ของ Google
// BOTTOM_RIGHT แสดงชิดขอบล่างด้านขวาก่อนคำว่า copyrights
// LEFT แสดงชิดขอบข้างด้านซ้ายอยู่ใต้ส่วนอื่นที่ชิดขอบบนซ้ายลงมา
// RIGHT แสดงชิดขอบข้างด้านขวาอยู่ใต้ส่วนอื่นที่ชิดขอบบนขวาลงมา
// TOP แสดงชิดขอบบนตรงกลาง
// TOP_LEFT แสดงชิดขอบบนด้านซ้ายขยับออกจากแนวตรงกลาง
// TOP_RIGHT แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง
// รูปแบบประกอบไปด้วย
// DEFAULT แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม
// หรือขึ้นอยู่กับองค์ประกอบอื่นๆ ก็จะเปลี่ยนแปลงไปตามนั้น
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
scaleControl:true, // กำนหนดให้แสดงสเกลอัตราส่วน ในแผนที่
scaleControlOptions:{ // กำนหนดตำแหน่าง และรูปแบบ style ของสเกลอัตราส่วนของแผนที่
position:GGM.ControlPosition.BOTTOM_LEFT, // จัดตำแหน่ง
style:GGM.ScaleControlStyle.DEFAULT // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
my_Marker = new GGM.Marker({ // สร้างตัว marker
position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
// draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
/* infowindow = new GGM.InfoWindow({
content:$.ajax({
url:'placeDetail.php',
async:false
}).responseText
});*/
// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง infowindows
GGM.event.addListener(my_Marker, 'click', function() {
// infowindow.open(map,my_Marker);
var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
// map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker
// $("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
// $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
// $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
GGM.event.addListener(my_Marker, 'click', function() {
// infowindow.open(map,my_Marker);
var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
// map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker
// $("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
// $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
// $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, 'tilesloaded', function() {
// infowindow.open(map,my_Marker);
// $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, 'zoom_changed', function() {
// $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
}
var tmpPosition;
var tmpStyle;
$("button.mybtTest").click(function(){
var mapScaleControlOpt=$(this).text();
tmpPosition=eval("GGM.ControlPosition."+mapScaleControlOpt);
map.setOptions({
scaleControlOptions:{
position:eval("GGM.ControlPosition."+mapScaleControlOpt),
style:tmpStyle
}
});
});
$("button.mybtTest2").click(function(){
var mapScaleControlOpt=$(this).text();
tmpStyle=eval("GGM.ScaleControlStyle."+mapScaleControlOpt);
map.setOptions({
scaleControlOptions:{
position:tmpPosition,
style:eval("GGM.ScaleControlStyle."+mapScaleControlOpt)
}
});
});
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งที่เปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 4209 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 5377 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 5880 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 1802 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 3265 25 Sep 08 การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery อ่าน 2726 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 2233 25 Sep 08 ตรวจสอบนามสกุลไฟล์ ก่อนทำการอัพโหลด อ่าน 3863 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4633 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 1223 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3758 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย อ่าน 7874 25 Sep 08 การแปลงค่าตัวแปรเป็นตัวแปร string ด้วยฟังก์ชัน toString() อ่าน 4150 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 9070 25 Sep 08 แสดงตัวอักษร เหมือนกับกำลังพิมพ์ คล้าย www.manager.co.th อ่าน 3485 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 4803 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 4015 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 6296