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

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

อยากจะขอแนวทาง การดัดแปลง 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

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน 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
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ