ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

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

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

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ให้ตำแหน่ง 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 บาท หรือ ระบุจำนวน