สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map

29 March 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

google map

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

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า http://www.ninenik.com/content.php?arti_id=326 เป็นแนวทางแทน

สร้างฟอร์ม สำหรับดึงค่า พิกัด ค่า latitude, longitude และค่า zoom จาก google map สำหรับบันทึก
ตำแหน่งของสถานที่ โดยอาศัย การลากตำแหน่งตัว remark ในแผนที่ google map ไปยังจุด หรือตำแหน่ง
ที่ต้องการ โดยจะมี ค่า input text 3 ตัว เพื่อรับค่า latitude, longitude และค่า zoom เมื่อได้ค่าที่ต้องการ
สามารถนำไปบันทึกลงฐานข้อมูล หรือ นำไปใช้ใน การกำหนดจุดสถานที่ ใน google map api ต่อไปได้

ตัวอย่าง

HTML Code ตัวอย่าง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html{
	padding:0px;
	margin:0px;
}
div#map_canvas{
	margin:auto;
	width:600px;
	height:550px;
	overflow:hidden;
}
</style>

</head>

<body>

<div id="map_canvas">
</div> 

<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyCSTujeM64MyA3QnjwKF_SnXmaiyTItWOM" type="text/javascript"></script>
<script type="text/javascript"> 
function initialize() { 
  if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("map_canvas")); 
	var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น
	map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ 
	map.setUIToDefault(); 
	
	var marker = new GMarker(center, {draggable: true});  
    map.addOverlay(marker);
	 
	GEvent.addListener(marker, "dragend", function() {
		var point = marker.getPoint();
		map.panTo(point);

		$("#lat_value").val(point.lat());
		$("#lon_value").val(point.lng());
		$("#zoom_value").val(map.getZoom());

	});	 
	 
  } 
} 
</script> 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	initialize();
	$(document.body).unload(function(){
			GUnload();
	});
});
</script>
<div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
    Latitude
    <input name="lat_value" type="text" id="lat_value" value="0" />
    Longitude
    <input name="lon_value" type="text" id="lon_value" value="0" />
  Zoom
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />
  <input type="submit" name="button" id="button" value="บันทึก" />
  </form>
</div>
</body>
</html>

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

เนื้อหาส่วนนี้อาจจะไม่เป็นปัจจุบัน เก่าแล้ว แนะนำให้ ศึกาษาได้ที่ คลิก

http://www.ninenik.com/content.php?arti_id=326

ซึ่งเป็นเนื้อหาที่ใหม่กว่า และไม่ต้องใช้ api key

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

Tags:: google map

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

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

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

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