ผมมีปัญหาคือเวลากรอกคำค้นหาที่ช่องค้นหาแล้วหลังจากนั้นคลิกปุ่มค้นหา ตรงช่อง side bar น่ะครับมันขึ้นรายการที่ค้นหาได้เบิ้ลขึ้นมาน่ะครับ คือสมมุติค้นหาได้ 2 รายการ แต่ใน side bar มันขึ้นมา 4 รายการน่ะครับ ไม่รู้โค้ดผิดตรงไหน รบกวนผู้รู้ช่วยด้วยครับ
Code (PHP)
<form name="frmSearch" method="get" action="<?=$_SERVER['SCRIPT_NAME'];?>">
<table width="100%" border="0">
<tr>
<th>กรอกข้อมูลที่ต้องการค้นหา
<input name="asearch" type="text" id="asearch" value="<?=$_GET["asearch"];?>">
<input type="submit" value="ค้นหา">
</th>
</tr>
</table>
</form>
<?
if($_GET["asearch"] != "")
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" /><style type="text/css">
<!--
body,td,th {
font-size: 14px;
}
-->
</style><head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://10.115.1.125/gps/info/css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.18&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../../gps/info/js/jquery.js"></script></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></script>
<head>
<title></title>
</head>
<body>
<div id="contain_map" style="left: 200px; width: 100%; top: 0px">
<table>
<tbody>
<tr>
<td width="850" height="450" rowspan="2"><div id="map_canvas" style="width: 850px; height:450px"></div></td>
<td width="181" height="402" valign="top">
<div id="side_bar" style="overflow: auto; height: 450px; width:250px ; color: #000"><ul id="navigator_link">
</ul></div> </td>
</tr>
</tbody>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(14.745667105779793,99.9261474609375);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 9, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP_RIGHT, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
$.ajax({
url:"search12.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var fid = $(this).find("id").text();
var idfarm = $(this).find("idfarm").text();
var idfarm1 = $(this).find("idfarm1").text();
var fproducer = $(this).find("team").text();
var fcollection = $(this).find("fcollection").text();
var name = $(this).find("name").text();
var lat = $(this).find("lat").text();
var lng = $(this).find("lng").text();
var name1 = $(this).find("name1").text();
var address = $(this).find("add").text();
var type = $(this).find("type").text();
var photo = $(this).find("photo").text();
var markerDataID=$(this).find("dataid").text();
// ส่วนสำหรับสร้างลิ้งค์ใน sidebar
//var navi_link="<li><a href='javascript:showInfo("+i+")'><br>ชื่อ :"+markerName+"</a></li>";
//$("#navigator_link").prepend(navi_link); // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar */
var navi_link="<li><a href='javascript:showInfo("+i+")'>" + idfarm1 + "<br/>" + name + "<br/>" + address + "<br/> ...............................................</a></li>";
$("#navigator_link").prepend(navi_link); // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar */
var markerLatLng=new GGM.LatLng(lat,lng);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
infowindow[i] = new GGM.InfoWindow({
content:$.ajax({
url:'searchpop.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
data:'pid='+markerDataID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
async:false
}).responseText
});
GGM.event.addListener(my_Marker[i], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
var iwCloseBtn = iwOuter.next();
iwCloseBtn.css({
opacity: '1', // by default the close button has an opacity of 0.7
right: '38px', top: '3px', // button repositioning
border: '7px solid #48b5e9', // increasing button border and new color
'border-radius': '13px', // circular effect
'box-shadow': '0 0 5px #3990B9' // 3D effect to highlight the button
});
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
});
});
}
});
}
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง infowindow
function showInfo(i){ // ส่งค่า i คือ index ของตัว marker แต่ละตัวในแผนที่
// เมื่อคลิกจากลิ้งค์ ให้ตัว marker ในแผนที่นั้นๆ ถูกคลิกด้วย
GGM.event.trigger(my_Marker[i],"click");
}
$(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>
<?
}
else
{}
?>
<?
session_start();
$_SESSION[sess_id]=session_id();
$_SESSION[sess_asearch]=$_GET["asearch"];
?>
Load balance : Server 00
