google map แสดงตำแหน่ง marker สถานที่ ที่ใกล้เคียง

03 October 2014 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

google map ใกล้เคียง marker

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

ดูแล้ว 15,464 ครั้ง

ตัวอย่างโค้ด เป็นการประยุกต์นำฟังก์ชั่น การหาตำแหน่ง marker ที่ใกล้เคียง

จากเนื้อหาตามลิ้งค์ด้านล่างนี้มาใช้งาน

http://stackoverflow.com/questions/4057665/google-maps-api-v3-find-nearest-markers

http://stackoverflow.com/questions/9156909/map-markers-is-undefined-google-map-api-v3

โดยประยุกต์กับเนื้อหาเก่า

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์

https://www.ninenik.com/content.php?arti_id=336 via @ninenik

การทำงานของตัวอย่าง คือ เราต้องการหาตำแหน่ง marker ที่ใกล้เคียงที่สุด

กับตัว marker ที่เรากำหนด

หรือสามารถไปประยุกต์หาตำแหน่ง marker ที่ใกล้ตำแหน่งปัจจุบันของเราก็ได้

โดยจะเรียกใช้ฟังก์ชันเมื่อ ลากจุด marker ที่เรากำหนด ไปยังตำแหน่งที่ต้องการ

หรือ คลิกที่แผนที่ไปตำแหน่งที่ต้องการ จากนั้นก็จะ alert แจ้งเตือน marker ที่อยู่

ใกล้เคียงที่สุด ในตัวอย่างคือจังหวัดที่ใกล้เคียง

ตัวอย่าง

โค้ดตัวอย่าง และคำอธิบายแสดงในโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google map near marker</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:450px;  
        height:500px;  
        margin:auto;
    /*	margin-top:100px;*/
    }
    </style>
</head>
<body>
 
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  <br />
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  <br />
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript" src="script.js"></script> 
</body>
</html>

ไฟล์ script.js

var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker1;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
function initialize() { // ฟังก์ชันแสดงแผนที่
    
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
    
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
    
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 6, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
    
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
    map.markers = []; // กำหนด property ของ object map ชื่อ markers ไว้เก็บ marker เป็น array
	$.ajax({
		url:"simple_3.xml", // ใช้ 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 เมื่อเอาเมาส์มาอยู่เหนือ
				});
                map.markers.push(my_Marker[i]); // เก็บ object marker ไว้ในตัวแปร
                
				//  กรณีตัวอย่าง ดึง 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 ที่เปิดไว้อ้างอิงใช้งาน
				});			
			});
		}	
	});		    
    
	my_Marker1 = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
        icon:"https://www.ninenik.com/demo/google_map/images/male-2.png",
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	
    
	// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
	GGM.event.addListener(my_Marker1, "dragend", function(e) {
        // เรียกใช้ฟังก์ชันหาตำแหน่งใกล้เคียง
        find_closest_marker(e);    
        
		var my_Point = my_Marker1.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		
	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, "zoom_changed", function() {
		$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});
	
	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, "click", function(e) {
        // เรียกใช้ฟังก์ชันหาตำแหน่งใกล้เคียง        
        find_closest_marker(e);      
        
		var latClick=e.latLng.lat(); // e.latLng.lat().toFixed(6);
		var lonClick=e.latLng.lng();
		var latlonClck=new GGM.LatLng(latClick,lonClick);
		my_Marker1.setPosition(latlonClck);
		var my_Point = my_Marker1.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value		
	});	
}
function rad(x) {return x*Math.PI/180;} // ฟังก์ชั่นที่กี่ยวข้อง
function find_closest_marker( event ) { // ฟังก์ชั่นหาตำแหน่งใกล้เคียง
    var lat = event.latLng.lat();  // ตำแหน่ง lat ที่เราเลือก
    var lng = event.latLng.lng();  // ตำแหน่ง lng ที่เราเลือก
    var R = 6371; // รัศมีของโลกเป็น กิโลเมตร
    var distances = []; // กำหนดตัวแปร array ไว้เก็บระยะห่าง เทียบกับ marker แต่ละตัว
    var closest = -1;  // กำหนดค่าไว้เก็บตำแหน่าง key ของ marker ที่ใกล้ที่สุด
    for( i=0;i<map.markers.length; i++ ) { // วนลูป marker
        // เริ่มต้นส่วนของสูตรการคำนวณหาระยะทาง
        var mlat = map.markers[i].position.lat();
        var mlng = map.markers[i].position.lng();
        var dLat  = rad(mlat - lat);
        var dLong = rad(mlng - lng);
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;  // ได้ตัวแปร d คือระยะยทาง
        // สิ้นสุด ส่วนของสูตรการคำนวณหาระยะทาง
        distances[i] = d; // เก็บระยะทางไว้ใน ตัวแปร array
        if ( closest == -1 || d < distances[closest] ) { // เทียบระยะทางหาค่าที่น้ยอ หรือใกล้ที่สุด
            closest = i;  // เก็บ key ของ marker ที่ใกล้ที่สุด
        }
    }
    // แสดง title ของ marker ที่ใกล้เคียง
    alert(map.markers[closest].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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});

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