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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ให้ตำแหน่ง marker ตรงกับค่า latitude longitude ใน form

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

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

Phez SmiLe 09-07-2016 22:44:19

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ตัวอย่าง

Latitude
Longitude

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

ninenik 10-07-2016

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน