สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map
29 March 2010สร้างฟอร์ม สำหรับดึงค่า พิกัด ค่า 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="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg" 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>
เนื้อหาส่วนนี้อาจจะไม่เป็นปัจจุบัน แนะนำให้ ศึกาษาได้ที่
http://www.ninenik.com/content.php?arti_id=326
ซึ่งเป็นเนื้อหาที่ใหม่กว่า และไม่ต้องใช้ api key
http://www.ninenik.com/content.php?arti_id=326
ซึ่งเป็นเนื้อหาที่ใหม่กว่า และไม่ต้องใช้ api key
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
12 Nov 10 ประยุกต์ php ฟังก์ชัน time() อย่างง่าย กับการแสดง เงื่อนไข ช่วงเวลา อ่าน 2330 08 Feb 11 แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery อ่าน 3988 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 3496 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 1307 13 Feb 09 แปลงข้อความเป็นตัวเล็ก toLowerCase ตัวใหญ่ toUpperCase ด้วย javascript อ่าน 1895 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 5635 24 Feb 09 เพิ่มลูกเล่นให้กับป้ายโฆษณาตรึงขอบล่าง ด้วย jQuery อ่าน 3533 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 5761 28 Sep 10 สร้างคำสั่ง สำหรับปุ่มควบคุม กำหนดเอง ใน google map อ่าน 1521 30 Oct 08 กำหนดเวลารอดำเนินการ ด้วย javascript อย่างง่าย อ่าน 2738 05 Jun 09 สร้างฟังก์ชัน แสดงการสุ่มเลือกตัวอักษร random ด้วย php อย่างง่าย อ่าน 2454 20 Jul 10 CakePHP เริ่มต้นกับ mod rewrite ของ Apache อ่าน 1472 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1612 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2154 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4706 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 3841 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4616 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 3288 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4671 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 10183