infowindow แสดงข้อมูลซ้ำกัน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา infowindow แสดงข้อมูลซ้ำกัน

infowindow แสดงข้อมูลซ้ำกัน

infowindow แสดงข้อมูลซ้ำกันค่ะ ไม่รู้ว่าผิดตรงไหน ก็ประยุกต์มาใช้ 
รบกวนช่วยดูโค้ดหน่อยค่ะ
ขอบคุณค่ะ


อันนี้เป็นโค้ดที่ใช้แสดง หน้าแผนที่ค่ะ มีฟอร์มการเสิร์ชด้วย

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
.
.
.
  
<body>

<div id="form_search_data">  
      <form id="form_search_map_data" name="form_search_map_data" method="post" action="">  
        <input type="text" name="data_search" id="data_search" value="<?=$_POST['data_search']?>" style="width:300px;" />  
        <input type="submit" name="bt_search" id="bt_search" value="Search" />  
      </form>  
    </div>    
  <div id="map_canvas"></div> 
   
   
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">  
var map; 
var GGM;  
var infowindow=[]; 
var infowindowTmp;     
var my_Marker=[];     
var markerID=[]; 
var markerName=[];   
var markerLat=[]; 
var markerLng=[]; 
var markerLatLng=[]; 
var contentData=[]; 
var obj_marker; 
function initialize() { 
    GGM=new Object(google.maps);   
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.730470,100.569901);  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 15,
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:GGM.MapTypeId.ROADMAP, 
        mapTypeControlOptions:{ 
            position:GGM.ControlPosition.TOP, 
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU   
        }  
    };  
    map = new GGM.Map(my_DivObj,myOptions);
  

    
    $.ajax({  
		url:"genMarker.php", 
        type: "GET",   
        data: { data_search : "<?=$_POST['data_search']?>"}, 
        dataType: "xml",  
        success:function(xml) { 
     
            $(xml).find("marker").each(function(i){    
                    markerID[i]=$(this).attr("id");        
                    markerName[i]=$(this).find("name").text();
					markerLng[i]=$(this).find("longitude").text();
					markerLatLng[i]=new GGM.LatLng(markerLat,markerLng);
					markerLat[i]=$(this).find("latitude").text();
                    markerLat[i]=$(this).find("latitude").text();      
                    markerLng[i]=$(this).find("longitude").text();                 
                    markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);    
                    my_Marker[i] = new GGM.Marker({     
                        position:markerLatLng[i],     
                        map: map,     
                        title:markerName[i]    
						
                    });    
                    
                    //contentData[i]=markerName[i];  
                    infowindow[i] = new GGM.InfoWindow({    
					content:$.ajax({    
						url:'detail_form_info.php',
						data:'id='+markerID, 
						async:false
						}).responseText    
					});                                    
  
                    GGM.event.addListener(my_Marker[i], "click", function(){ 
                        if(infowindowTmp!=null){ 
                            infowindow[infowindowTmp].close(); 
                        }    
                        infowindow[i].open(map,my_Marker[i]); 
                        infowindowTmp=i; /    
                    });                      
                      
                  //console.log($(this).find("id").text());    
            });    
        }       
    });
	
  
}  
$(function(){  
  
    $("<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>

ส่วนอันนี้เป็นหน้า genMarker.php ใช้กำหนดตำแหน่งให้ตัว marker

<?php  
include ('_connect.php');
header("Content-type:text/html; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);         
?>  
 <?php 
			$ResID=$_GET['id']; //******
			//echo $AccomID;
			$query="SELECT * FROM Residence WHERE 1 $q_search ORDER BY ResID  $q_limit ";
			//echo $query; 
			include('_connect.php');
			
			$result=mysql_query($query);
			$row=mysql_fetch_array($result);
			//การประกาศตัวแปร
			$ResTypeID=$row["ResTypeID"];
			$ResName=$row["ResName"];
			$ResAddress=$row["ResAddress"];
			$ResSoi=$row["ResSoi"];	
			$res_lat=$_POST["res_lat"];
 			$res_lon=$_POST["res_lon"];
			
			//$query_ResType="SELECT * FROM ResType"; //คำสั่งSelect
//			$result_ResType=mysql_query($query_ResType); //รับค่า
//			
			
			?>
<table width="300" border="0" cellspacing="2" cellpadding="0">  
  <tr>  
    <td width="10" rowspan="4">  
    <img src="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"  
     width="130" height="80">  
    </td>  
    <td width="10">&nbsp;</td>  
    <td width="264"><?=$ResName?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td><?=$ResAddress?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>รายละเอียด</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td><a href="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"  
     target="_blank">ลิ้งค์อ่านเพิ่ม</a></td>  
  </tr>  
</table>

Bpsweett 14-02-2015 11:44:32

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

บรรทัดนี้มั้ย data:'id='+markerID, เปลี่ยนเป็น data:'id='+markerID[i],

ninenik 14-02-2015

ความคิดเห็นที่ 2

ก็ยังซ้ำกันอยู่ดีค่ะ อาจเป็นเพราะหน้า genMarker รึป่าว คะ คือจริงๆมันคือหน้า detail ที่ดึงรายละเอียดการแสดงรูปแบบ infowindow มา(เขียนผิดเป็น genMarker)


อันนี้คือหน้า genMarker ค่ะ

<?php  
//header("Content-type:text/xml; charset=UTF-8");                
header("Cache-Control: no-store, no-cache, must-revalidate");               
header("Cache-Control: post-check=0, pre-check=0", false);     
include ('_connect.php');
/*mysql_query("set character set utf8");  
echo '<?xml version="1.0" encoding="utf-8"?>';  */

?>  
<markers>  
<?php  
$q_search="";
$q_limit="";
if(isset($_GET['data_search']) && $_GET['data_search']!=""){ 

    $q_search=" AND ResName like '%".$_GET['data_search']."%' ";  
}else{  
  
    $q_limit=" LIMIT 0 ";  
}  


$query="SELECT * FROM Residence WHERE 1 $q_search ORDER BY ResID  $q_limit ";  
$qr=mysql_query($query);  

while($row=mysql_fetch_array($qr)){  
?>  
     
    <marker id="<?=$row['ResID']?>">  
        <name><?=$row['ResName']?></name>
        <latitude><?=$row['res_lat']?></latitude>  
        <longitude><?=$row['res_lon']?></longitude>  
    </marker>
<?php } ?>
</markers>

bpsweett 14-02-2015 14:26

ความคิดเห็นที่ 3

เขียนโค้ดผิดหรือเปล่า คำถามดูสับสน
- ต้องการส่งค่าค้นหา ไปค้นหาในฐานข้อมูล แล้วแสดงตัวปักหมุด ตามข้อมูลที่ได้จากฐานข้อมูลหรือเปล่า ถ้าใช้ดูบทความนี้

ประยุกต์ ใช้ ajax ค้นหาในฐานข้อมูล และแสดง ตำแหน่งบนแผนที่ google map

https://www.ninenik.com/content.php?arti_id=456 via @ninenik

- ต้องการให้คลิกที่รายการที่ปักหมุด แล้วแสดง infowindow ข้อมูลของแต่ละที่หรือเปล่า ที่ถ้าใช้ดูบทความนี้

การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery

https://www.ninenik.com/content.php?arti_id=328 via @ninenik

ninenik 14-02-2015

ความคิดเห็นที่ 4

คืออย่างนี้ค่ะ
มีหน้าที่แสดงแผนที่ แล้วมีเรื่องของการเสิร์ชมาเกี่ยวข้องด้วย
แล้วปัญหาคือ เวลาเลือกดูที่ infowindowของหมุดนั้นๆ ข้อมูลมันไม่ตรงกับหมุดอ่ะค่ะ

เช่นเสิร์ชมาแล้ว เจอหมุดสามตัว ตัว infowindow ของหมุดสามตัว เป็นข้อมูลเดียวกันหมด ซึ่งจริงๆมันต้องเป็นข้อมูลของหมุดนั้นๆอ่ะค่ะ

คือหนูเอาสอง ตัวอย่างที่พี่ให้มา มาประยุกต์ใช้ด้วยกันค่ะ
แล้วปัญหาคือที่หนูบอกไปด้านบน

bpsweett 14-02-2015 14:59

ความคิดเห็นที่ 5

กรณีนี้น่าจะเป็นที่สองจุด คือ ส่วนที่ส่งค่า ตรง ajax
และก็ส่วนของไฟล์ ดึงข้อมูล
อย่างแรกทดสอบเรื่องการส่งค่าก่อน

ปร้บเป็น

//contentData[i]=markerName[i];    
                    infowindow[i] = new GGM.InfoWindow({      
                    content:$.ajax({      
                        url:'detail_form_info.php',  
                        data:'id='+markerID[i],   
                        async:false  
                        }).responseText      
                    });

ส่วนที่สอง สร้างไฟล์ detail_form_info.php โดยใช้แบบง่าย ไม่ต้องมีอะไรก่อน เพื่อดูว่าค่าตัวแปร
id ที่ส่งมา มีค่าถูกต้องไหม

ไฟล์ detail_form_info.php

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
echo $_GET['id'];
exit;
?>

ถ้าทดสอบแล้ว มีการส่งค่า id มาถูกต้อง ก็แสดงว่าปัญหาก็จะมาอยู่ที่หน้า detail_form_info.php

ninenik 14-02-2015

ความคิดเห็นที่ 6

ก็ยังไม่ได้ค่ะ

ลองตรวจสอบแล้ว ค่าไอดีไม่มา ขึ้น warning ค่ะ
หน้า detail_form_info.php ลองลบ ที่ดึงจากดาต้าเบสมาแล้ว รันดู ก็เหมือนเดิมค่ะ ข้อมูล infowindow ซ้ำเหมือนกันหมดเลย

ส่วนของ ajax ก็ปรับแล้ว

bpsweett 14-02-2015 15:42

ความคิดเห็นที่ 7

แบบนี้ผิดที่โค้ดไฟล์หลักแล้วหละ