การใช้งาน jqueryui tab กับ google map หาก มีการแสดง
google map ในตำแหน่งเริ่มต้น ใน tab ที่ถูกซ่อนอยู่
เมื่อมีการกดแสดง tab นั้นๆ จะเกิดปัญหาการแสดงผล แผนที่
โดยมีการแสดงไม่ครบถ้วน และไม่สมบูรณ์
วิธีการแก้ปํญหา สามารถใช้ได้ทั้ง google map เวอร์ชั่น 2 และ 3
โดยสามารถประยุกต์ตามต้องการ
สำหรับ google map v2 ดูตัวอย่างได้ที่
ในตัวอย่าง และโค้ดทดสอบ นี้ จะใช้กับ google map v3
การทำงาน คือ
เริ่มต้นเมื่อมีการเรียกใช้งาน google map จะเรียกใช้งานจากฟังก์ชั่น
initialize();
เราจะแก้ปํญหา โดยการ ให้มีการเรียกใช้งานฟังก์ชั่นนี้อีกครั้ง
เมื่อมีการคลิกที่ tab ที่มี google map อยู่
โดยใช้โค้ดดังนี้
$("#tabs").tabs();
$("a[href='#tabs-3']").click(function(){
initialize();
});
ตัวอย่าง
รายละเอียดย่อยหัวข้อแท็บที่ 1
รายละเอียดย่อยหัวข้อแท็บที่ 2
โค้ดทดสอบ
<!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></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
"0"=>"base",
"1"=>"black-tie",
"2"=>"blitzer",
"3"=>"cupertino",
"4"=>"dark-hive",
"5"=>"dot-luv",
"6"=>"eggplant",
"7"=>"excite-bike",
"8"=>"flick",
"9"=>"hot-sneaks",
"10"=>"humanity",
"11"=>"le-frog",
"12"=>"mint-choc",
"13"=>"overcast",
"14"=>"pepper-grinder",
"15"=>"redmond",
"16"=>"smoothness",
"17"=>"south-street",
"18"=>"start",
"19"=>"sunny",
"20"=>"swanky-purse",
"21"=>"trontastic",
"22"=>"ui-darkness",
"23"=>"ui-lightness",
"24"=>"vader"
);
$jquery_ui_theme=$theme[14];
?>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/jquery-ui.min.js"></script>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
}
body{
font-size:12px;
}
div.test_demo_main{
margin:auto;
width:75%;
}
/* ปรับขนาดตัวอักษรของข้อความใน tabs
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs
*/
.ui-tabs{
font-family:tahoma;
font-size:11px;
}
div#map_canvas{
margin:auto;
width:600px;
height:550px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="test_demo_main">
<div id="tabs">
<ul>
<li><a href="#tabs-1">หัวข้อแท็บที่ 1</a></li>
<li><a href="#tabs-2">หัวข้อแท็บที่ 2</a></li>
<li><a href="#tabs-3">หัวข้อแท็บที่ 3</a></li>
</ul>
<div id="tabs-1">
<p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>
</div>
<div id="tabs-2">
<p>รายละเอียดย่อยหัวข้อแท็บที่ 2</p>
</div>
<div id="tabs-3">
<p>
<div id="map_canvas"></div>
<div id="showDD" style="margin:auto;padding-top:5px;width:550px;">
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
Latitude
<input name="lat_value" type="text" id="lat_value" value="0" /> <br />
Longitude
<input name="lon_value" type="text" id="lon_value" value="0" /> <br />
Zoom
<input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />
<br />
<input type="submit" name="button" id="button" value="บันทึก" />
</form>
</div>
</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// แทรกโค้ต jquery
// กำหนดแบบทั่วไป
$("#tabs").tabs();
$("a[href='#tabs-3']").click(function(){
initialize();
});
// กำหนดแบบเลื่อนหัวข้อซ้าย ขวาได้
// $("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
// กำหนดแบบให้ซ่อนรายละเอียด เมื่อคลิกที่หัวข้อแท็บซ้ำ
// $("#tabs").tabs({collapsible: true});
// กำหนดให้แสดงรายละเอียดเมื่อนำเมาท์มาอยู่เหนือหัวข้อแท็บ
// $("#tabs").tabs({event: 'mouseover'});
});
</script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
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];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
var infowindow = new GGM.InfoWindow({
map: map,
position: pos,
content: "คุณอยู่ที่นี่."
});
var my_Point = infowindow.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
map.setCenter(pos);
},function() {
// คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
});
}else{
// คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
}
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, "zoom_changed", function() {
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
}
$(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>
