แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย
26 January 2012ประยุกต์จากเนื้อหา
DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map
โดยอยู่ภายใต้เงื่อนไข คือจุดเริ่มต้น และสิ้นสุด จะไม่สามารถลากเพื่อ เปลี่ยนเส้นทางได้
ตัวอย่าง
From:
To:
To:
โค้ดทั้งหมด
<!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="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-latest.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; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
var makeMarker; //
var icons;
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// Start/Finish icons
icons = {
start: new GGM.MarkerImage(
// URL
'http://google-maps-icons.googlecode.com/files/walking-tour.png',
// (width,height)
new GGM.Size( 44, 32 ),
// The origin point (x,y)
new GGM.Point( 0, 0 ),
// The anchor point (x,y)
new GGM.Point( 22, 32 )
),
end: new GGM.MarkerImage(
// URL
'http://google-maps-icons.googlecode.com/files/spring-hot.png',
// (width,height)
new GGM.Size( 44, 32 ),
// The origin point (x,y)
new GGM.Point( 0, 0 ),
// The anchor point (x,y)
new GGM.Point( 22, 32 )
)
};
directionShow=new GGM.DirectionsRenderer({suppressMarkers:true});
// directionShow=new GGM.DirectionsRenderer({
// draggable:true,
// markerOptions:{
// draggable: true,
// raiseOnDrag: false,
// dragCrossMove: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); // สร้างเส้นทางจากผลลัพธ์
// console.log(directionShow);
// console.log(results.routes[0].legs[0]);
// directionShow.markerOptions.icon=icons.start;
// directionShow.markerOptions.icon=icons.end;
var leg = results.routes[0].legs[0];
makeMarker(leg.start_location, icons.start, "title" );
makeMarker(leg.end_location, icons.end, 'title' );
// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
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);
// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ 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(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
});
makeMarker=function(position,icon,title){
new GGM.Marker({
// draggable: true,
// raiseOnDrag: false,
// dragCrossMove:true,
position: position,
map: map,
icon: icon,
title: title
});
}
});
$(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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 17 Mar 09 ง่ายๆ กับการส่งค่าตัวแปร PHP ไปใช้ใน Javascript อ่าน 5706 19 Aug 09 สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI อ่าน 10648 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1197 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 1623 28 May 10 แสดง การแจ้งเตือน ให้เปิด หรือ บันทึกไฟล์ที่ดาวน์โหลด ด้วย php อ่าน 1258 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 25071 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3267 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10432 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1097 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 05 Nov 09 เช็ค บราวเซอร์ Browser ด้วย php อย่างง่าย อ่าน 2309 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 5081 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2831 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3326 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 9203 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2628 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5726 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5185 05 Jun 09 สร้างฟังก์ชัน แสดงการสุ่มเลือกตัวอักษร random ด้วย php อย่างง่าย อ่าน 2512