สร้างฟอร์ม สำหรับดึงค่า พิกัด ค่า latitude, longitude และค่า zoom จาก google map สำหรับบันทึก
ตำแหน่งของสถานที่ โดยอาศัย การลากตำแหน่งตัว remark ในแผนที่ google map ไปยังจุด หรือตำแหน่ง
ที่ต้องการ โดยจะมี ค่า input text 3 ตัว เพื่อรับค่า latitude, longitude และค่า zoom เมื่อได้ค่าที่ต้องการ
สามารถนำไปบันทึกลงฐานข้อมูล หรือ นำไปใช้ใน การกำหนดจุดสถานที่ ใน google map api ต่อไปได้
ตัวอย่าง
HTML Code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <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&v=2&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> |
