PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แสดงข้อมูลตัวเลือก ด้านข้าง google map กับการใช้งาน event.trigger

03 October 2010 By


เนื้อหาต่อไปนี้ เป็นส่วนต่อเนื้องจาก หัวข้อ
http://www.ninenik.com/กำหนด_infowindow_ให้กับตัว_marker_จำนวนมาก_ใน_google_map-338.html

ในกรณีที่มีการแสดง ตัว marker จำนวนมาก เพื่อกำหนดสถานที่ต่างในแผนที่ การคลิกที่ตัว marker พื่อแสดงข้อมูล infowindow แต่ละตัว ทำให้หาตำแหน่งของสถานที่นั้นๆ ได้ยาก
ดังนั้น การกำหนดชื่อสถานที่ของตัว marker แต่ละตัวนอกแผนที่ จะป็นวิธีที่ง่าย สำหรับการใช้งาน

 

ตัวอย่างโค้ต เนื้อหาบางส่วนตัวเนื่องจาก http://www.ninenik.com/กำหนด_infowindow_ให้กับตัว_marker_จำนวนมาก_ใน_google_map-338.html

<!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>Google Map API 3 - 01</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 กำหนดความกว้าง ความสูงของแผนที่ */
#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>

<div id="contain_map">
  <div id="map_canvas"></div>
  <div id="side_bar">
		<ul id="navigator_link">
        </ul>
  </div>
</div> 
<script type="text/javascript" src="js/jquery-1.4.2.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(13.761728449950002,100.6527900695800);
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 6, // กำหนดขนาดการ 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:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  

				var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLng=$(this).find("longitude").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
				
				// ส่วนสำหรับสร้างลิ้งค์ใน sidebar
				var navi_link="<li><a href='javascript:showInfo("+i+")'>"+markerName+"</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:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
				});
				//  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
				infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
					content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
				});
//				// 	กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
//				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 ที่เปิดไว้อ้างอิงใช้งาน
				});			
			});
		}	
	});		

	
}
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง 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>

 


Tags:: google map event.trigger





URL สำหรับอ้างอิง