Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > พี่ๆ ค่ะ ช่วยดูโค๊ด JavaScript แผนที่ให้หน่อย ไม่รู้จะทำยังไงแล้ว

พี่ๆ ค่ะ ช่วยดูโค๊ด JavaScript แผนที่ให้หน่อย ไม่รู้จะทำยังไงแล้ว

เริ่มหัวข้อใหม่

toom

โพสกระทู้ ( 195 )
บทความ ( 0 )

พี่ๆค่ะ ช่วยหน่อยนะ จนปัญญาแล้ว ตอนนี้โค๊ดมันสามารถแสดงค่าละติจูด ลองติจูดแล้ว แต่มันแสดงให้ช่อง text box อันเดียวกัน แต่อยากไห้ มันแสดงค่าละติจูด ลองติจูด แยกกันเป็น 2 text box คือค่าละติจูดก้อ ละติจูด ลองติจูดก้อลองติจูด ทำไงดีค่ะช่วยหน่อยนะใกล้ส่งงานแล้ว

Code (PHP)

<!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 { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From: 
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From: 
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="a" type="text" id="a" size="60" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="b" type="text" id="b" size="60" /><br />
ระยะทางข้อความ  
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข 
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />  
  <br />
  * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	directionShow=new  GGM.DirectionsRenderer({draggable:true});
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
		var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
		var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
		var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
		$("#distance_value").val(distanceVal);
		$("#duration_text").val(durationText);
		$("#duration_value").val(durationVal);		
	});

}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				
				var locaStart=results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น
				var locaEnd=results.routes[0].legs[0].end_location;
				
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
				var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
				var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				
				$("#a").val(locaStart);
				$("#b").val(locaEnd);
				
				$("#distance_text").val(distanceText);
				$("#distance_value").val(distanceVal);
				$("#duration_text").val(durationText);
				$("#duration_value").val(durationVal);		
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
	
});
$(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>

Tag : HTML/CSS, JavaScript, Ajax

Date : 2013-02-28 22:41:05

By : nongtoom

View : 1659

Reply : 5

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

ลองรอคุณ deawx มาตอบให้ครับ

Date : 2013-03-01 05:59:24

By : mr.win

No. 2

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

ใส่โค้ดมันเพิ่มเข้าไปครับผม
ต้องขอโทษทีครับที่ตอบช้า .. ตอนนี้ กำลังเตรียมงานแต่ง แฮ่ ๆ เลยมะค่อยได้เข้ามาดู.

^____________^

Code (PHP)

<!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 { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From: 
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From: 
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="a" type="text" id="a" size="60" /><br />
  lat1<input name="a1" type="text" id="a1"  /><br />
  lat2<input name="a2" type="text" id="a2"   /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="b" type="text" id="b" size="60" /><br />
    long1<input name="b1" type="text" id="b1" size="60" /><br />
  long2<input name="b2" type="text" id="b2" size="60" /><br />
ระยะทางข้อความ  
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข 
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />  
  <br />
  * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	directionShow=new  GGM.DirectionsRenderer({draggable:true});
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
		var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
		var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
		var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
		$("#distance_value").val(distanceVal);
		$("#duration_text").val(durationText);
		$("#duration_value").val(durationVal);		
	});

}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				
				var locaStart=results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น
				var locaEnd=results.routes[0].legs[0].end_location;
				
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
				var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
				var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				$("#a").val(locaStart);
				$("#a1").val(locaStart.lat());
                $("#a2").val(locaStart.lng());
				$("#b").val(locaEnd);
                $("#b1").val(locaEnd.lat());
                $("#b2").val(locaEnd.lng());
								
				$("#distance_text").val(distanceText);
				$("#distance_value").val(distanceVal);
				$("#duration_text").val(durationText);
				$("#duration_value").val(durationVal);		
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
	
});
$(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>

Date : 2013-03-01 09:27:47

By : deawx

No. 3

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

อัปเดต ตอนมีการเลื่อน Marker ให้แสดง latitude ด้วย จากเดินมันจะไม่แสดง

ตัวอย่างครับ http://jsbin.com/erefow/1/

Code (PHP)

<!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 { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From: 
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From: 
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="a" type="text" id="a" size="60" /><br />
  lat1<input name="a1" type="text" id="a1"  /><br />
  lat2<input name="a2" type="text" id="a2"   /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="b" type="text" id="b" size="60" /><br />
    long1<input name="b1" type="text" id="b1" size="60" /><br />
  long2<input name="b2" type="text" id="b2" size="60" /><br />
ระยะทางข้อความ  
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข 
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />  
  <br />
  * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	directionShow=new  GGM.DirectionsRenderer({draggable:true});
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
   
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
		var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
		var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
		var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข
      //เมื่อมีการเลื่อนหมุด
        var startlatlng = results.routes[0].legs[0].start_location;
        var startlat =  results.routes[0].legs[0].start_location.lat();
        var startlng =  results.routes[0].legs[0].start_location.lng();
        var endlatlng = results.routes[0].legs[0].end_location;
        var endlat =  results.routes[0].legs[0].end_location.lat();
        var endlng =  results.routes[0].legs[0].end_location.lng();       
      //เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
				$("#a").val(startlatlng);
				$("#a1").val(startlat);
                $("#a2").val(startlng);
				$("#b").val(endlatlng);
                $("#b1").val(endlat);
                $("#b2").val(endlng);
      
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
		$("#distance_value").val(distanceVal);
		$("#duration_text").val(durationText);
		$("#duration_value").val(durationVal);		
      
      
      
      
      
	});

}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				
				var locaStart=results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น
				var locaEnd=results.routes[0].legs[0].end_location;
				
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
				var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
				var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				$("#a").val(locaStart);
				$("#a1").val(locaStart.lat());
                $("#a2").val(locaStart.lng());
				$("#b").val(locaEnd);
                $("#b1").val(locaEnd.lat());
                $("#b2").val(locaEnd.lng());
								
				$("#distance_text").val(distanceText);
				$("#distance_value").val(distanceVal);
				$("#duration_text").val(durationText);
				$("#duration_value").val(durationVal);		
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	}); 
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
	
});
$(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>

ประวัติการแก้ไข
2013-03-01 09:49:38

Date : 2013-03-01 09:47:34

By : deawx

No. 4

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

http://jsbin.com/apuxij/1/ อีกตัวอย่าง สำหรับใครที่ต้องการใช้ Transit ด้วย

Date : 2013-03-01 10:01:53

By : deawx

No. 5

toom

โพสกระทู้ ( 195 )
บทความ ( 0 )

ขอบคุนมากกกค่ะ พี่เดี่ยว ยินดีด้วยนะค่ะ ขอให้รักกันนานๆนะ คนที่เป็นเจ้าสาวเขาจะรู้ไหมน่า ว่าเขาโชคดีมากกกแค่ไหน

Date : 2013-03-01 17:12:00

By : nongtoom

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : พี่ๆ ค่ะ ช่วยดูโค๊ด JavaScript แผนที่ให้หน่อย ไม่รู้จะทำยังไงแล้ว

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก