ส่วนของ NavigationControlOptions คือส่วนที่แสดงการควบคุมการย่อขยาย การเลื่อนตำแหน่ง ของแผนที่ โดยปกติ จะอยู่ทางมุมบนด้านซ้าย ของแผนที่
การจัดการในส่วนของ NavigationControlOptions นี้ ทำให้เราสามารถกำหนด ตำแหน่ง และ รูปแบบได้
ตำแหน่งต่าๆ งประกอบไปด้วย
ภาพประกอบจาก Google
BOTTOM แสดงชิดขอบล่างตรงกลาง
BOTTOM_LEFT แสดงชิดขอบล่างด้านซ้ายต่อหลังจากโลโก้ของ Google
BOTTOM_RIGHT แสดงชิดขอบล่างด้านขวาก่อนคำว่า copyrights
LEFT แสดงชิดขอบข้างด้านซ้ายอยู่ใต้ส่วนอื่นที่ชิดขอบบนซ้ายลงมา
RIGHT แสดงชิดขอบข้างด้านขวาอยู่ใต้ส่วนอื่นที่ชิดขอบบนขวาลงมา
TOP แสดงชิดขอบบนตรงกลาง
TOP_LEFT แสดงชิดขอบบนด้านซ้ายขยับออกจากแนวตรงกลาง
TOP_RIGHT แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง
รูปแบบประกอบไปด้วย
ANDROID แสดงปุ่มควบคุมการย่อขยายขนาดเล็ก คล้ายกับที่ใช้ในมือถือ Android
DEFAULT แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม
หรือขึ้นอยู่กับองค์ประกอบอื่นๆ ก็จะเปลี่ยนแปลงไปตามนั้น
SMALL แสดงปุ่มควบคุมการย่อขยายขนาดเล็ก
ZOOM_PAN แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม
ส่วนที่ใช้ในการจัดตำแหน่ง NavigationControlOptions และรูปแบบ style ในโค้ด
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
navigationControlOptions:{ // การจัดรูปแบบส่วนควบคุมการย่อขยาย การเลื่อนตำแหน่ง ของแผนที่
position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง
style:GGM.NavigationControlStyle.ZOOM_PAN // จัดรูปแบบ 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">ANDROID</button>
<button class="mybtTest2">DEFAULT</button>
<button class="mybtTest2">SMALL</button>
<button class="mybtTest2">ZOOM_PAN</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 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 แสดงชิดขอบบนด้านขวาขยับออกจากแนวตรงกลาง
// รูปแบบประกอบไปด้วย
// ANDROID แสดงปุ่มควบคุมการย่อขยายขนาดเล็ก คล้ายกับที่ใช้ใน Android
// DEFAULT แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม
// หรือขึ้นอยู่กับองค์ประกอบอื่นๆ ก็จะเปลี่ยนแปลงไปตามนั้น
// SMALL แสดงปุ่มควบคุมการย่อขยายขนาดเล็ก
// ZOOM_PAN แสดงปุ่มควบคุมการย่อขยายและส่วนควบคุมการเลื่อนตำแหน่งแบบเต็ม
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่
navigationControlOptions:{ // การจัดรูปแบบส่วนควบคุมการย่อขยาย การเลื่อนตำแหน่ง ของแผนที่
position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง
style:GGM.NavigationControlStyle.ZOOM_PAN // จัดรูปแบบ 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!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
}
var tmpPosition;
var tmpStyle;
$("button.mybtTest").click(function(){
var mapNaviControlOpt=$(this).text();
tmpPosition=eval("GGM.ControlPosition."+mapNaviControlOpt);
map.setOptions({
navigationControlOptions:{
position:eval("GGM.ControlPosition."+mapNaviControlOpt),
style:tmpStyle
}
});
});
$("button.mybtTest2").click(function(){
var mapNaviControlOpt=$(this).text();
tmpStyle=eval("GGM.NavigationControlStyle."+mapNaviControlOpt);
map.setOptions({
navigationControlOptions:{
position:tmpPosition,
style:eval("GGM.NavigationControlStyle."+mapNaviControlOpt)
}
});
});
$(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
