ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้
ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ พอดีผมอยากเขียนโค้ดที่เอาทั้ง 2 ตัวอย่างCode ที่คุณ ninenik แบ่งปันไว้ มาดักแปลงใช้งานรวมกันครับ ผมลองทำแล้วแต่ไม่สำเร็จ ยังไงก็อยากจะขอคำชี้แนะครับ

นี้คือตัวอย่างภาพ ครับ

ผมเอา code ของ  https://www.ninenik.com/content.php?arti_id=328  และ https://www.ninenik.com/content.php?arti_id=350 มาลองประยุกต์ใช้ร่วมกัน คือวัตถุประสงค์ของผมคือ ต้องการโฆษนา ขายที่ดิน แล้วถ้าผม Click ที่รายละเอียดของที่ดินๆที่ต้องการดูข้อมูลก็กด click ที่แถบ Link ด้านขวามือ แล้วให้มันแสดง Infowindows ขึ้นมา แบบตามภาพ แต่ที่ผมแสดงข้อมูลออกมามันทำได้แค่การ Link หาข้อมูล เพียงหน้าเดียว คือผมอยากให้มันแสดง info windows ที่เป็นของหน้ารายละเอียดที่ดินของแต่ละที่ดินที่เลือกครับ แต่ที่ทำได้ตอนนี้ คือมันแสดงinfo windows เหมือนกันหมด ผมอยากจะขอคำชี้แนะจากพี่ๆด้วยครับ ผมควรแก้ไขCode ยังไงดี ถึงจะออกมาเป็นตามที่ผมต้องการ ขอบคุณมากๆๆครับ



Forkawasaki 11-12-2011 13:41:59

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • CAPTCHA Image
    Play CAPTCHA Audio
    Refresh Image


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

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

code ของผม มีดังนี้ครับ

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</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 สำหรับ div คลุมGridViewAccident อีกที */
#GridViewAccident {
	position:relative;
	width:600px;
	height:900px;
	margin:auto;
	margin-top:20px;
	overflow:hidden;
/*	background-color:#FC6;*/
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	position:relative;
	float:left;
	top:0px;
	width:450px;
	height:400px;
/*	margin:auto;*/
}
/* css สำหรับ div คลุม google map อีกที */
#contain_map {
	position:relative;
	width:600px;
	height:400px;
	margin:auto;
	margin-top:50px;
	overflow:hidden;
/*	background-color:#FC6;*/
}
/* บรรทัดต่อจากนี้เป็น css กำหนดการแสดงในส่วน sidebar หรือแถบข้าง */
#side_bar{
	position:relative;
	float:left;
	width:150px;
	height:418px;
	background-color:#000;
	overflow:auto;
/*	scrollbar-3dlight-color:#CCCCCC; 
	scrollbar-arrow-color:#FFFFFF; 
	scrollbar-base-color:#CCCCCC; 
	scrollbar-darkshadow-color:#EAEAEA; 
	scrollbar-face-color:#999999; 
	scrollbar-highlight-color:#666666; 
	scrollbar-shadow-color:#CCCCCC; 
	scrollbar-track-color:#EAEAEA; 	*/
}
/* ส่วน css สำหรับกำหนดการแสดงของ ul ใน sidebar */
#navigator_link{
	position:relative;
	list-style:none;
	padding:0px;
	padding-bottom:10px;
	left:10px;
}
/* ส่วน css กำหนดสีและรูปแบบลิ้งค์ ใน sidebar */
#navigator_link li a{
	text-decoration:none;
	color:#FFF;	
}
/* ส่วน css กำหนดให้ข้อความใน li เยื้องเข้าไป 5 pixel */
#navigator_link li{
	text-indent:5px;
}
/* ส่วน css สีพื้นหลังของ li เมื่อ mouse over */
#navigator_link li:hover{
	background-color:#CCC;	
}
/* ส่วน css สีของลิ้งค์ เมื่อ mouse over */
#navigator_link li:hover a{
	color:#000;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 <div id="contain_map" style="left: 0px; width: 789px; top: 0px">
  <div id="map_canvas" style="width: 462px"></div>
  <div id="side_bar" style="left: 0px; width: 326px; top: 2px">
		<ul id="navigator_link">
        </ul>
  </div>
</div> 
        
<script type="text/javascript" src="JS/jquery-latest.min.js"></script>        
    <script type="text/javascript">
    var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var my_Marker2; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker3; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker4; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker5; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker6; // กำหนดตัวแปรสำหรับเก็บตัว marker
var infowindow2; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow3; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow4; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow5; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow6; // กำหนดตัวแปรสำหรับเก็บตัว 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.521251296714565,100.25057509908356);
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 14, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.SATELLITE, // กำหนดรูปแบบแผนที่
		mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
			position:GGM.ControlPosition.TOP_RIGHT, // จัดตำแหน่ง
			style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map


	$.ajax({
		url:"XmlMark/IsosXmlMarkAu.xml", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
		dataType: "xml",
		success:function(xml){
			$(xml).find('Table').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
				var markerID=$(this).find("G_AuID").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerG_AuName=$(this).find("G_AuName").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
				var markerG_AuAddress=$(this).find("G_AuAddress").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
				var markerG_AuDetail=$(this).find("G_AuDetail").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerG_See=$(this).find("G_AuProvince").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
				var markerG_Tel=$(this).find("G_AuCarCompanyName").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
				var markerLat=$(this).find("G_AuLatitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLng=$(this).find("G_AuLongitude").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
				var markerdistance=$(this).find("distance").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
				var markerLink=$(this).find("Link").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
 
				// ส่วนสำหรับสร้างลิ้งค์ใน sidebar
				var navi_link="<li><a href='javascript:showInfo("+i+")'>"+markerG_AuName+' <br>  '+'  <br>  '+markerG_AuAddress+' <br>  '+markerG_AuDetail+'<br>'+markerG_See+'<br> ระยะห่างจากจุดเกิดเหตุ  '+markerdistance+'<br>'+markerG_Tel+'<br>'+markerLink+'<br> .............................................................................'+' <br> '+'<br>'+"</a></li>";
				$("#navigator_link").prepend(navi_link);	 // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar			
				  			
				var markerLatLng=new GGM.LatLng(markerLat,markerLng);
				my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				
				//Info 2
				var markerLatLng2=new GGM.LatLng(13.529103454672098,100.25309101113953);
				my_Marker2 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng2,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				
					//Info 3
				var markerLatLng3=new GGM.LatLng(13.52348101251885,100.25282279023804);
				my_Marker3 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng3,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				
				//Info 4
				var markerLatLng4=new GGM.LatLng(13.518943323290766,100.24491563806214);
				my_Marker4 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng4,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
								//Info 5
				var markerLatLng5=new GGM.LatLng(13.515772105272134,100.24905696878113);
				my_Marker5 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng5,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				//Info 6
				var markerLatLng6=new GGM.LatLng(13.51232961690261,100.2468897438971);
				my_Marker6 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
					position:markerLatLng6,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
					map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
					title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				//  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
				infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array

		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});
				
				//  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
				//infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
				//	content:my_Marker[i].getTitle()
				//	});
				
	infowindow2 = new GGM.InfoWindow({
		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});
		infowindow3 = new GGM.InfoWindow({
		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});
			infowindow4 = new GGM.InfoWindow({
		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});
			infowindow5 = new GGM.InfoWindow({
		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});
			infowindow6 = new GGM.InfoWindow({
		content:$.ajax({
			url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});

//				// 	กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
//				infowindow[i] = new GGM.InfoWindow({   
//					content:$.ajax({   
//						url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล   
//						data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
//						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 ที่เปิดไว้อ้างอิงใช้งาน


				});		
				
					
				 //GGM.event.addListener(map, 'tilesloaded', function() {   
       // infowindow2.open(map,my_Marker2); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว   
       // infowindow3.open(map,my_Marker3); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว     
 // infowindow4.open(map,my_Marker4);
 // infowindow5.open(map,my_Marker5);
 // infowindow6.open(map,my_Marker6);
  //  });   
   // จบ

						
			});
		}	
	});		

	
}
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง 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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
   
                
 </script> 
    </div>
    </form>
</body>
</html>

 



forkawasaki 11-12-2011 13:46
 ความคิดเห็นที่ 2

ได้แล้วครับ ขอบคุณมากครับ

ผมใช้วิธีนี้ครับ ก็ดึง i แล้วเรียก หา ReadMoreMap"+i+".aspx ก็จะได้ ReadMoreMap0.aspx ถึง ReadMoreMap5.aspx ผมมีอยู่ หน้าขายที่ดิน อยู่ 6 ที่ ก็จะได้ Array 0-5 ผมใช้วิธีสร้างหน้า  ReadMoreMap0.aspx ถึง ReadMoreMap5.aspx  เอางับ ^_^ ยังไงก็ขอบคุณมากครับ

//  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
				infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array

		content:

		$.ajax({
			url:"ReadMoreMap"+i+".aspx",//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
			async:false
		}).responseText
	});

 



forkawasaki 11-12-2011 16:45
 ความคิดเห็นที่ 3

 เก่งจังเลยครับผม ไม่ทราบว่าจะพอช่วยแนะนำผมได้บ้างหรือป่าวครับ 

คือ ผมลอง 

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ ดู

จากอันนี้ครับ https://www.ninenik.com/content.php?arti_id=336 แต่ไม่เห็นมันจะมีอะไรขึ้นเลยครับ ผม อยากทราบว่าเราต้องสร้างฐานข้อมูลด้วยหรือป่าวครับ แล้วถ้าเราจะสร้าง มันต้องกำหนดยังไงบ้างอะครับผม  รบกวนด้วยครับช่วยชี้แนะผมหน่อย 

ผมลองเอาไปลงดู หน้า genmarker.php มันขึ้นแบบนี้ครับ 

This page contains the following errors:

error on line 1 at column 1: Document is empty

Below is a rendering of the page up to the first error.



Kron Kuluna 26-01-2012 21:46
 ความคิดเห็นที่ 4

 ขอโค้ด  XmlMark/IsosXmlMarkAu.xml ด้วยได้ไหมค่ะคุณ  Forkawasaki 



ZatocksEii ComSci 27-03-2012 16:33
 ความคิดเห็นที่ 5

 

ไม่เห็นอะไรเกิดขึ้นเลย ขอไฟล์ดึงฐานข้อมูลหน่อย

 



ต้น โชคติกุล 30-09-2012 15:19
 ความคิดเห็นที่ 6

วิธีสร้างหน้า  ReadMoreMap0.aspx ต้องทำอย่างไรคะ รบกวนด้วยค่ะ



kukiis 21-04-2013 14:19
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2026 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ