PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ให้ตำแหน่ง marker ตรงกับค่า latitude longitude ใน form

ให้ตำแหน่ง marker ตรงกับค่า latitude longitude ใน form
ตอนนี้สามารถดึงค่า  latitude longitude  ใน sql มาแสดงใน form แล้วแต่จะให้ marker ปรากฎ มาตรงตำแหน่งตาม ค่า  latitude longitude ทำอย่างไงครับ

โดย:  Phez SmiLe IP: 14.207.203.xxx วันที่: 09-07-2016 เวลา: 22:44:19

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ลองดูโค้ดนี้เป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<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:100px;*/
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  

    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="16.2548912" />  <br />
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="102.62176669999997" />  <br />
  <br />
  <input type="button" name="view_marker" id="view_marker" value="แสดงตำแหน่ง" />  

</div> 
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker;  // กำหนดตัวแปร my_Marker สำหรับ Marker Object
var infowindow; // กำหนดตัวแปร infowindow สำหรับ infowindow Object
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: 8, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

  // ดึงค่าข้อมูลจากฟอร์ม ที่ระบุ lat และ lon มาไว้ในตัวแปร
  var latVal=$("#lat_value").val();
  var lonVal=$("#lon_value").val();
  
  // สร้างตำแหน่ง จากค่า lat และ lon
  var markerLatLng= new GGM.LatLng(latVal,lonVal);    
  if(!markerLatLng.lat()){ // ถ้าไม่มีค่าตำแหน่ง
    markerLatLng=my_Latlng; // ให้ใช้ค่าเดิมที่เป็นค่าเริ่มต้นด้านบน
  }
	map.panTo(markerLatLng); // เลื่อนไปยังตำแหน่ง marker
  my_Marker = new GGM.Marker({ // สร้างตัว marker    
    position:markerLatLng,  // กำหนดคำแหน่ง marker 
    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
    title:"ตำแหน่ง marker" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
  });      
  
  // กำหนดค่าให้ตัวแปร infowindow
  infowindow = new GGM.InfoWindow({
    content: "รายละเอียดตำแหน่ง marker" // เนื้อหาที่จะแสดงใน inforwindow
  });
  
  // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
  GGM.event.addListener(my_Marker,"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว     
    infowindow.open(map,my_Marker); // แสดง infowindow ของตัว marker ที่คลิก    
  });       
	

}
$(function(){
  	// เมื่อคลิกที่ปุ่ม แสดงตำแหน่ง
  	$("#view_marker").on("click",function(){
      	// ลบ marker ตำแหน่งเดิมออก เพื่อใช้ตำแหน่งใหม่
      	my_Marker.setMap(null);   
      
        // ดึงค่าข้อมูลจากฟอร์ม ที่ระบุ lat และ lon มาไว้ในตัวแปร
        var latVal=$("#lat_value").val();
        var lonVal=$("#lon_value").val();

        // สร้างตำแหน่ง จากค่า lat และ lon
        var markerLatLng= new GGM.LatLng(latVal,lonVal);    
      
        map.panTo(markerLatLng); // เลื่อนไปยังตำแหน่ง marker
      	my_Marker = new GGM.Marker({ // สร้างตัว marker    
        position:markerLatLng,  // กำหนดคำแหน่ง marker  
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
        title:"ตำแหน่ง marker" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
      	});          
      
      	// กำหนดค่าให้ตัวแปร infowindow
        infowindow = new GGM.InfoWindow({
          content: 'รายละเอียดตำแหน่ง marker' // เนื้อหาที่จะแสดงใน inforwindow
        });

        // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
        GGM.event.addListener(my_Marker,"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
          infowindow.open(map,my_Marker); // แสดง infowindow ของตัว marker ที่คลิก    
        });            
      
    });
});
$(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>


ตัวอย่าง

Latitude
Longitude



หรือดูเพิ่มเติมในหัวข้อ google map ได้ที่
http://www.ninenik.com/google_search.php?tags=google%20map

โดย:  Ninenik IP: 122.155.42.xxx วันที่: 10-07-2016