PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แสดงข้อมูล google place type ตามเส้นทาง ใน google map ตอนที่ 2

14 July 2015 By


เนื้อหาตอนนี้ จะเป็นการประยุกต์ต่อจากตอนที่แล้ว หลังจากที่เรารู้จักวิธีการสร้าง
RouteBoxer เพื่อกำหนดขอบเขตตามเส้นทางใน google map
 
ใช้งาน RouteBoxer กำหนดขอบเขตตามเส้นทาง ใน google map ตอนที่ 1 
http://www.ninenik.com/content.php?arti_id=650 via @ninenik
 
โดยเราจะทำการแสดงสถานที่ต่างๆ ที่อยู่บนเส้นทาง ใน google map 
ซึ่งเป็นการดึงข้อมูลจาก google place สำหรับ place type หรือประเภท
สถานที่ที่รองรับใน google place ประกอบด้วยอะไรบ้างในดูจากลิ้งค์ด้านล่างนี้
https://developers.google.com/places/supported_types
 
ในตัวอย่างสำหรับทดสอบ เราจะใช้ bus_station หรือ ป้ายรถเมล์ มาแสดง
 
*ข้อควรจำ: ข้อมูลจาก google place จะมีการจำกัดการแสดงไม่เกิน 20 รายการ
แต่ในที่นี้เราจะใช้เทคนิคการวนแสดงข้อมูล ทีละ 20 เพื่อให้แสดงข้อมูลจนครบตลอดเส้นทาง
และข้อมูลแต่ละสถานที่ อาจจะมากน้อยแตกต่างกัน
 
ตัวอย่าง
 
From : To:
 
โค้ดตัวอย่างทั้งหมด คำอธิบายแสดงในโค้ด
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta 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;
        width:550px;
        height:400px;
        margin:auto;
    }
    /* css สำหรับ div คลุม google map อีกที */
    #contain_map{
        position:relative;
        width:550px;
        height:400px;
        margin:auto;	
		color:#000000;
    }
    /* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */
    #showDD{
        position:absolute;
        bottom:0px;
        height:30px;
        padding-top:5px;
        background-color:#CCC;
/*        color:#FFF;	*/
    }
    /* css ของส่วนแสดงคำแนะนำเส้นทางการเดินทาง */
    #directionsPanel{
        width:550px;
        margin:auto;
        clear:both;	
/*        background-color:#F1FEE9;*/
    }
    /* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */
    .adp-placemark{
/*        background-color:#9C3;*/
    }
    .adp-summary{

    }
    .adp-directions{

    }
    </style>

</head>
<body>

<div id="contain_map">
<div id="map_canvas"></div>
<div id="showDD">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->

<table width="550" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
From :
<input name="namePlace" type="text" id="namePlace" value="" size="20" />
To:
<input name="toPlace" type="text" id="toPlace" value="" size="20" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />    
    </td>
  </tr>
</table>
</div>   
</div>
<div id="directionsPanel"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&libraries=places" type="text/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></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 boxpolys = null;
var routeBoxer = null;
var distance_radius = 0.1 * 1.609344; // เปลี่ยน 0.1 เป็นค่าอื่น 0.1 คือ 100 เมตร   
var drawBoxes;    // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น สำหรับสร้าง boxes
var clearBoxes;   // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น สำหรับลบ boxes

var findPlaces;   // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น การค้นหาสถานที่
var servicePlace; // ตัวแปรสำหรับใช้กับ place service ของ google place
var createMarker;  // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น  สำหรับสร้าง marker
var clearMarker;  // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น  สำหรับลบ marker
    
var gmarkers=[];   // กำหนดตัวแปร สำหรับเก็บ array marker
var infowindow;   //  กำหนดตัวแปร ไว้เก็บ infowindow
    
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
    servicePlace = new GGM.places.PlacesService(map); // ยังไม่ใช้ตอนนี้ กำหนดไว้ไม่เสียหาย
    
    
    routeBoxer = new RouteBoxer(); // สร้าง object

	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	// ส่วนสำหรับกำหนดให้แสดงคำแนะนำเส้นทาง
	directionShow.setPanel($("#directionsPanel")[0]);  
	

    
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
        clearBoxes();
        clearMarker();
      // Box around the overview path of the first route
        var path = results.routes[0].overview_path;
        var boxes = routeBoxer.box(path, distance_radius);
        drawBoxes(boxes);   
        setTimeout(function(){
            findPlaces(boxes,0); // เริ่มค้นหาสถานที่ หลัง 5 วินาที
        },5000);

	});

}
$(function(){
    

    
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
        clearBoxes(); // ล้างค่า
        clearMarker();
		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); // สร้างเส้นทางจากผลลัพธ์
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
        clearBoxes();
        clearMarker();
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
    
    
    
    
    
    // วาดรูปสี่เหลี่ยม จาก array ของ boxes แล้วแสดงในแผนที่
    drawBoxes = function(boxes) {
      boxpolys = new Array(boxes.length);
      for (var i = 0; i < boxes.length; i++) {
        boxpolys[i] = new GGM.Rectangle({
          bounds: boxes[i],
          fillOpacity: 0,
          strokeOpacity: 0, // ถ้าไม่ต้องการให้มองเห็นกำหนดเป็น 0
          strokeColor: '#000000',
          strokeWeight: 1,
          map: map
        });
      }
    }
    
    
    
    // ฟังก์ชั่นวนลูปล้างค่า boxes ออกจากแผนที่ 
    clearBoxes = function() {
      if (boxpolys != null) {
        for (var i = 0; i < boxpolys.length; i++) {
          boxpolys[i].setMap(null);
        }
      }
      boxpolys = null;
    }    
    
    // ฟังก์ชั่นวนลูปล้างค่า Marker ออกจากแผนที่ 
    clearMarker = function() {
      if (gmarkers != null) {
        for (var i = 0; i < gmarkers.length; i++) {
          gmarkers[i].setMap(null);
        }
      }
   //   gmarkers = null;
    }        
    
	
    findPlaces = function(boxes,searchIndex){
       var request = {
           bounds: boxes[searchIndex],
           types: ["bus_station"]  // เปลี่ยน place type ได้ที่จุดนี้
       };
       servicePlace.radarSearch(request, function (results, status) {
       if (status != GGM.places.PlacesServiceStatus.OK) {
//           console.log("Request["+searchIndex+"] failed: "+status);
//         return;
           if(status=="OVER_QUERY_LIMIT"){
               var request = {
                   bounds: boxes[searchIndex],
                   types: ["bus_station"] // เปลี่ยน place type ได้ที่จุดนี้
               };   
               servicePlace.radarSearch(request, function (results, status) {
               if (status != GGM.places.PlacesServiceStatus.OK) {
                   console.log("Request["+searchIndex+"] failed: "+status);
                   setTimeout(function(){
                        findPlaces(boxes,searchIndex);
                   },5000);
                   return;
               }});
           }
       }
       for (var i = 0, result; result = results[i]; i++) {
         var marker = createMarker(result);
       }
       searchIndex++;
       if (searchIndex < boxes.length) 
            console.log(searchIndex);
            findPlaces(boxes,searchIndex);
       });
    }
    
    
    // สร้าง marker บทแผนที่
    createMarker = function(place) {
        
        var placeLoc=place.geometry.location;
        // กรนีใช้ icon จาก google map ถ้ามี
        if (placeLoc.icon) {
          var image = new GGM.MarkerImage(
                    placeLoc.icon, new GGM.Size(71, 71),
                    new GGM.Point(0, 0), new GGM.Point(17, 34),
                    new GGM.Size(25, 25));
         } else var image = null;
        
        // หรือกำหนดเอง สามารถโหลดรุปมา หรือเรียกใช้งานจาก path ตรงได้
        // https://mapicons.mapsmarker.com/ สร้างรุป icon หรือเลือกรูปได้จากที่นี้    
        var image="busstop.png";

        var marker=new GGM.Marker({
            map:map,
            icon: image,
            position:placeLoc
        });
        var request =  {
              reference: place.reference
        };


        GGM.event.addListener(marker,'click',function(){
            console.log(place);
            infowindow = new GGM.InfoWindow();
            servicePlace.getDetails(request, function(place, status) {
              if (status == GGM.places.PlacesServiceStatus.OK) {
                var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
                if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
                if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
                contentStr += '<br>'+place.types+'</p>';
                infowindow.setContent(contentStr);
                infowindow.open(map,marker);
              } else { 
                var contentStr = "<h5>No Result, status="+status+"</h5>";
                infowindow.setContent(contentStr);
                infowindow.open(map,marker);
              }
            });

        });     
        gmarkers.push(marker);
    }        
    
});
$(function(){
    
    // ทำงานสร้างและใช้งานแผนที่
    initialize();  
    // สังเกตว่า เราจะไม่ได้มีการเรียกใช้ ฟังก์ชั่น initialize แบบกำหนด callback เหมืนอตัวอย่าง
    // ก่อนเนื่องจาก RouteBoxer จำเป็นต้องมีการเรียกใช้งาน google.maps objext ไฟล์
    // google map จึงกำหนดในแท็ก script  ด้านบน
    
});      
</script>  
</body>
</html>

 
เพิ่มเติม: เราสามารถกำหนด icon ของแต่ละ marker เองได้ โดยสามารถสร้าง icon
จากรูปแบบได้ที่ลิ้งค์นี้ https://mapicons.mapsmarker.com/ 



เนื้อหาที่เกี่ยวข้อง



Tags:: routeboxer google place google map

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   



เนื่องจากไฟล์ที่ RouteBoxer.js ที่เรียกใช้งานผ่านตำแหน่งไฟล์ด้านล่างไม่สามารถใช้งานได้แล้ว
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>  
 
ให้เข้าไปทำการดาวน์โหลดไฟล์ RouteBoxer.js ได้ที่ลิ้งค์นี้ โดยคลิกเข้าไป แล้วเลือก save 
 
https://raw.githubusercontent.com/printercu/google-maps-utility-library-v3-read-only/master/routeboxer/src/RouteBoxer.js
 
จากนั้นเปลี่ยน path เป็นตำแหน่งไฟล์ที่เครื่องหรือ server เราแทน เช่น
จาก 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>  
 
เปลี่ยนเป็น
 
<script src="http://www.example.com/js/RouteBoxer.js" type="text/javascript"></script>  
 



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