PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

14 July 2015 By
google map routeboxer google place

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ google map routeboxer google place



เนื้อหาตอนนี้ จะเป็นการประยุกต์ต่อจากตอนที่แล้ว หลังจากที่เรารู้จักวิธีการสร้าง
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/ 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 31-03-2017


เนื่องจากไฟล์ที่ 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>  
 




อ่านต่อที่บทความ









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



Tags:: google map routeboxer google place




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

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


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



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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