003.<head>
004.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005.<title>แผนที่ Goo</title>
006.<style type="text/css">
007.body{
008. font-family:Tahoma, Geneva, sans-serif;
009.font-size:12px;
010.}
011.</style>
013.<script type="text/javascript" src="jquery"></script>
014.<script type="text/javascript">
015.function myMaps() {
016.var mapsGoo=google.maps;
017.var Position=new mapsGoo.LatLng(13.723419,100.476232);
018.var myOptions = {
019. center:Position,
020. scrollwheel: false,
021. zoom:8,
022. mapTypeId: mapsGoo.MapTypeId.ROADMAP
023. };
024.var map = new mapsGoo.Map(document.getElementById("map_canvas"),myOptions);
025.
026.var marker = new mapsGoo.Marker({
027. position: Position,
028. draggable:true,
029. title:"คลิกแล้วเคลื่อนย้ายหมุดไปยังตำแหน่งที่ต้องการ"
030. });
031.var Posi=marker.getPosition();
032.myMaps_locat(Posi.lat(),Posi.lng());
033.marker.setMap(map);
034.
035.mapsGoo.event.addListener(marker, 'dragend', function(ev) {
036. var location =ev.latLng;
037. myMaps_locat(location.lat(),location.lng());
038.});
039.mapsGoo.event.addListener(marker, 'click', function(ev) {
040. var location =ev.latLng;
041. myMaps_locat(location.lat(),location.lng());
042.});
043.mapsGoo.event.addListener(map,'zoom_changed',function(ev){
044. zoomLevel = map.getZoom();
045. $('#mapsZoom').val(zoomLevel);
046.});
047.}
048.function myMaps_locat(lat,lng){
049. $('#mapsLat').val(lat);
050. $('#mapsLng').val(lng);
051.}
052.$.fn.myMaps_submit=function(){
053. $(this).bind('submit', function(event) {
054. if($('#locat_name').val()==''){
055. alert('ระบุชื่อสถานที่ด้วยนะจ๊ะ!!');
056. }else{
057. $.ajax({
058. url: $(this).attr('action'),
059. type: "POST",
060. data: $(this).serialize(),
061. dataType: "html",
062. beforeSend: function(){
063. $('#loadding').html('<img src="wait.gif" />');
064. },
065. success: function(data) {
066. $('#show_locat').html(data);
067. $('#loadding').html('');
068. }
069. });
070. }
071.return false;
072. });
073.};
074.$(document).ready(function(){
075. myMaps();
076. $('#maps_form').myMaps_submit();
077.});
078.</script>
079.</head>
080.<body>
081.<table width="660" border="0" align="center" cellpadding="0" cellspacing="3">
082. <tr>
083. <td> <div id="map_canvas" style="width:650px; height:450px"></div>
084.
085.<form action="savemaps.php" method="post" id="maps_form">
086.<table width="250" border="0" align="center" cellpadding="3" cellspacing="0" style="border:1px dashed #999;background:#E0E0E0;">
087. <tr>
088. <td>ชื่อสถานที่</td>
089. <td>
090. <input type="text" name="locat_name" id="locat_name" />
091. </td>
092. </tr>
093. <tr>
094. <td> </td>
095. <td><input name="bt_savemaps" id="bt_savemaps" type="submit" value="บันทึกข้อมูล" /> <span id="loadding"></span>
096. <input type="hidden" name="mapsLat" id="mapsLat" />
097. <input type="hidden" name="mapsLng" id="mapsLng" />
098. <input type="hidden" name="mapsZoom" id="mapsZoom" value="8" /></td>
099. </tr>
100.</table>
101.</form>
102.<div id="show_locat"></div>
103.</td>
104. </tr>
105.</table>
106. </body>
107.</html>
