PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ใช้ jquery tab กับ google map แสดง map ไม่เต็ม

ใช้ jquery tab กับ google map แสดง map ไม่เต็ม
<!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>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script type="text/javascript" src="<?php echo $jqLib; ?>"></script>
 
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
 
  
</head>
 
<body> 
<script>
 $(function() {
  $( "#tabs" ).tabs();
  $( ".moved" ).click(function(){
        var next = $(this).attr("rel");
        $( "#tabs" ).tabs({ active: next });
  });
});
  </script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">หน้า 1</a></li>
    <li><a href="#tabs-2">หน้า 2</a></li>
    <li><a href="#tabs-3">หน้า 3</a></li>
    <li><a href="#tabs-4">หน้า 4</a></li>
    <li><a href="#tabs-5">หน้า 5</a></li>
 
  </ul>
   
<form name="nisit_loan" method="post" action="add.php"  enctype="multipart/form-data">
   <div id="tabs-1">
    
<div class="entry">
  <h2>รูปถ่าย</h2>
      
  <p>
    <script type="text/javascript">
 $(function(){
    Test = {
        UpdatePreview: function(obj){
          // if IE < 10 doesn't support FileReader
          if(!window.FileReader){
             // don't know how to proceed to assign src to image tag
          } else {
             var reader = new FileReader();
             var target = null;
             
             reader.onload = function(e) {
              target =  e.target || e.srcElement;
               $("#pic1").prop("src", target.result);
             };
              reader.readAsDataURL(obj.files[0]);
          }
        }
    };
});
    </script>
    <br>
    <img  id="pic1"src="#" alt="รูปภาพ" width="128" height="128" />
    <br>
    เลือกไฟล์ที่ต้องการ : <input type='file' name='browse' onchange='Test.UpdatePreview(this)'  />
  <table width="635" height="183"id="table_1" style="display:">
              <tr>
                <td width="170"><div align="right">ที่อยู่ปัจจุบัน  บ้านเลขที่</div></td>
                <td width="115"><input name="nisit_num_home2" type="text" id="nisit_num_home2" size="5" /></td>
                <td width="150"><div align="right">อำเภอ/เขต </div></td>
                <td width="180"><select id="selAmphur1" name="selAmphur1">
            <option value=""> ------- เลือก ------ </option>
        </select><span id="waitAmphur1"></span></td>
              </tr>
              <tr>
                <td><div align="right">หมู่ที่</div></td>
                <td><input name="nisit_moo2" type="text" id="nisit_moo2" size="5" /></td>
                <td><div align="right">ตำบล/แขวง</div></td>
                <td><select id="selTumbon1" name="selTumbon1">
            <option value=""> ------- เลือก ------ </option>
        </select><span id="waitTumbon1" ></span></td>
         <input type="hidden" id="provinceHidden1" name="provinceHidden1" />
    <input type="hidden" id="amphurHidden1" name="amphurHidden1" />
    <input type="hidden" id="tumbonHidden1" name="tumbonHidden1" />
    
              </tr>
              <tr>
                <td><div align="right">ตรอก/ซอย </div></td>
                <td><input name="nisit_soy2" type="text" id="nisit_soy2" size="15" /></td>
                <td><div align="right">รหัสไปรษณีย์</div></td>
                <td><input type="text" name="nisit_code2" id="nisit_code2" /></td>
              </tr>
              <tr>
                <td><div align="right">ถนน </div></td>
                <td><input name="nisit_road2" type="text" id="nisit_road2" size="15" /></td>
                <td><div align="right">โทรศัพท์</div></td>
                <td><input type="text" name="nisit_numberphone2" id="nisit_numberphone2" /></td>
              </tr>
              
              
      
              <tr>
              
                <td><div align="right">จังหวัด </div></td>
                <td><select id="selProvince1" name="selProvince1">
            <option value=""> ------- เลือก ------ </option>
            <?php
                $result = mysql_query("
                    SELECT
                        PROVINCE_ID,
                        PROVINCE_NAME
                    FROM 
                        province
                    ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
                ");
                
                while($row = mysql_fetch_assoc($result)){
                    echo '<option value="', $row['PROVINCE_ID'], '">', $row['PROVINCE_NAME'],'</option>';
                }
            ?>
        </select></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                
              </tr>
            
  </table>
    <div align="right">
    <input  type="button" class="moved" rel="1" value="ถัดไป" />
  </div>
   </p></div></div>
    <br />
  </p>
 
  
   <div id="tabs-2">
  <table width="635">
          <tr>
            <td width="174"><div align="right"> นิสิตอยู่ในความปกครองของ
          
        
        ชื่อ                </div></td>
            <td width="144"><input type="text" name="patronize_name" id="patronize_name" /></td>
            <td width="153"><div align="right">ที่อยู่ปัจจุบัน บ้านเลขที่ </div></td>
            <td width="144"><input name="patronize_num_home" type="text" id="patronize_num_home" size="5" /></td>
    </tr>
          <tr>
            <td><label for="old_father">
              <div align="right">นามสกุล</div>
            </label></td>
            <td><input type="text" name="patronize_lastname" id="patronize_lastname" /></td>
            <td><div align="right">หมู่ที่</div></td>
            <td><input name="patronize_moo" type="text" id="patronize_moo" size="5" /></td>
    </tr>
          <tr>
            <td><div align="right">อายุ </div></td>
            <td><input name="patronize_old" type="text" id="patronize_old" size="10" /></td>
            <td><div align="right">ตรอก/ซอย</div></td>
            <td><input name="patronize_soy" type="text" id="patronize_soy" size="15" /></td>
    </tr>
          <tr>
            <td><div align="right">สถานภาพ</div></td>
            <td><select name="patronize_status" id="patronize_status">
              <option value="non"> </option>
              <option value="ยังมีชีวิต">ยังมีชีวิต</option>
              <option value="ถึงแก่กรรม">ถึงแก่กรรม</option>
            </select></td>
            <td><div align="right">ถนน</div></td>
            <td><input name="patronize_road" type="text" id="patronize_road" size="20" /></td>
    </tr>
          <tr>
            <td><div align="right">จบการศึกษาขั้นสูงสุด</div></td>
            <td><input type="text" name="patronize_max_study" id="patronize_max_study" /></td>
            <td><div align="right">
              <div align="right">จังหวัด</div>
            </div></td>
            
            
            
                     
            <td><select id="selProvince4" name="selProvince4">
              <option value=""> ------- เลือก ------ </option>
 
              <?php
                $result = mysql_query("
                    SELECT
                        PROVINCE_ID,
                        PROVINCE_NAME
                    FROM 
                        province
                    ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
                ");
                
                while($row = mysql_fetch_assoc($result)){
                    echo '<option value="', $row['PROVINCE_ID'], '">', $row['PROVINCE_NAME'],'</option>';
                }
            ?>
            </select></td>
    </tr>
          <tr>
            <td><div align="right">จากสถานศึกษา</div></td>
            <td><input type="text" name="patronize_school" id="patronize_school" /></td>
            <td><div align="right">อำเภอ/เขต</div></td>
            <td><select id="selAmphur4" name="selAmphur4">
              <option value=""> ------- เลือก ------ </option>
            </select>
              <span id="waitAmphur4"></span></td>
    </tr>
          <tr>
            <td><div align="right">เลขบัตรประจำตัวประชาชน</div></td>
            <td><input name="patronize_id_card" type="text" id="patronize_id_card" /></td>
            <td><div align="right">ตำบล/แขวง</div></td>
            <td><select id="selTumbon4" name="selTumbon4">
              <option value=""> ------- เลือก ------ </option>
            </select>
              <span id="waitTumbon4" ></span></td>
              <input type="hidden" id="provinceHidden4" name="provinceHidden4" />
    <input type="hidden" id="amphurHidden4" name="amphurHidden4" />
    <input type="hidden" id="tumbonHidden4" name="tumbonHidden4" />
    </tr>
          <tr>
            <td><div align="right">เลขที่บัตรประจำตัวผู้เสียภาษี</div></td>
            <td><input type="text" name="patronize_id_tax" id="patronize_id_tax" /></td>
            <td><div align="right">รหัสไปรษณีย์</div></td>
            <td><input type="text" name="patronize_code" id="patronize_code" /></td>
    </tr>
          <tr>
            <td><div align="right">อาชีพ</div></td>
            <td><select name="patronize_job" id="patronize_job">
              <option value="non"></option>
              <option value="รับราชการ">รับราชการ</option>
              <option value="ผนักงานรัฐวิสาหกิจ">ผนักงานรัฐวิสาหกิจ</option>
              <option value="ค้าขาย">ค้าขาย</option>
              <option value="รับจ้าง">รับจ้าง</option>
              <option value="เกษตรกร">เกษตรกร</option>
              <option value="อื่นๆ">อื่นๆ</option>
            </select></td>
            <td><div align="right">โทรศัพท์</div></td>
            <td><input type="text" name="patronize_numberphone" id="patronize_numberphone" /></td>
    </tr>
          <tr>
            <td><div align="right">รายได้ปีละ</div></td>
            <td><input name="patronize_revrnue" type="text" id="patronize_revrnue" size="10" />
บาท</td>
            <td><div align="right">เกี่ยวข้องกับข้าพเจ้าโดยเป็น</div></td>
            <td><input type="text" name="patronize_about" id="patronize_about" /></td>
          </tr>
          <tr>
            <td><div align="right">ระบุเพิ่มเติมให้ชัดเจน</div></td>
            <td><input type="text" name="patronize_expansion_job" id="patronize_expansion_job" /></td>
            <td><div align="right"></div></td>
            <td>&nbsp;</td>
    </tr>
  </table>
  <div align="right">
    <input type="button" class="moved" rel="0" value="ก่อนหน้า" />
    <input type="button" class="moved" rel="2" value="ถัดไป" />
  </div>
  </div>
  
   <div id="tabs-3">
  <div align="right">
    <p>&nbsp;</p>
    <p>
      <input type="button" class="moved" rel="1" value="ก่อนหน้า" />
      <input type="button" class="moved" rel="3" value="ถัดไป" />
    </p>
  </div></div>
   
    <div id="tabs-4">
         <div class="entry">
          <h2>แผนผังที่อยู่บ้าน</h2>
          <br />
        </div>
        
          <label for="home_nisit"></label>
          <div align="right">
           
           <style type="text/css">
        
        /* css กำหนดความกว้าง ความสูงของแผนที่ */
        #map_canvas {
            width: 600px;
            height: 400px;
            margin: auto;
            margin-top: 50px;
 
        }
        #directions-panel { font-size:small;
width:600px;
margin:auto;
clear:both;
background-color:#F1FEE9;
}
/* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */
.adp-placemark{
background-color:#9C3;
}
.adp-summary{
 
}
.adp-directions{
 
}
        }
    </style>
    <div id="google_map">
<div id="map_canvas"></div>
   
    <div id="showDD" style="margin:auto; font-size:small;padding-top:5px;width:600px;">
        <!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
        From:
        <input name="namePlace" type="text" id="namePlace" size="30" />
        To:
<input name="toPlace" type="text" id="toPlace" size="30" />
        <br />
        <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
        <input type="button" name="iClear" id="iClear" value="Clear" />
        <hr />
        <!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  
            From:
            <input name="namePlaceGet" type="text" id="namePlaceGet" size="30" />
            To:
            <input name="toPlaceGet" type="text" id="toPlaceGet" size="30" />
            <br /> <br />
            เริ่มต้น
            <input name="a" type="text" id="a" size="30" />
            <input type="hidden" name="a1" id="a1" />
            <input type="hidden" name="a2" id="a2" />
            ปลายทาง
            <input name="b" type="text" id="b" size="30" />
            <input type="hidden" name="b1" id="b1" />
            <input type="hidden" name="b2" id="b2" />
            <br />
 
            <br />
            ระยะทาง
            <input name="distance_text" type="text" id="distance_text" value="" size="17" />
* ระยะทางโดยประมาณ <br />
            <p id="myconsole"></p>
       <div id="directions-panel"></div>
</div>
 
   
    <script type="text/javascript">
        var directionsDisplay;
        var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
        var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
        var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
        var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
        var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
        var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
        var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
        function initialize() { // ฟังก์ชันแสดงแผนที่
            directionsDisplay = new google.maps.DirectionsRenderer();
            GGM = new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
            directionShow = new GGM.DirectionsRenderer({
                draggable: true
            });
            directionsService = new GGM.DirectionsService();
            // กำหนดจุดเริ่มต้นของแผนที่
            my_Latlng = new GGM.LatLng(14.0278829, 99.98043610000002);
            // กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
            initialTo = new GGM.LatLng(14.0278829, 99.98043610000002);
            var my_mapTypeId = GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
            // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
            var my_DivObj = $("#map_canvas")[0];
            // กำหนด Option ของแผนที่
            var myOptions = {
                zoom: 13, // กำหนดขนาดการ zoom
                center: my_Latlng, // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
                mapTypeId: my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
            };
            map = new GGM.Map(my_DivObj, myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
            directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directions-panel'));
            if (map) { // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
                searchRoute(my_Latlng, initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
            }
 
            
            // กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
            GGM.event.addListener(directionShow, 'directions_changed', function () {
                var results = directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
                // นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
                var addressStart = results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
                var addressEnd = results.routes[0].legs[0].end_address; // สถานที่ปลายทาง
                var distanceText = results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
                //เมื่อมีการเลื่อนหมุด
                var startlatlng = results.routes[0].legs[0].start_location;
                var startlat = results.routes[0].legs[0].start_location.lat();
                var startlng = results.routes[0].legs[0].start_location.lng();
                var endlatlng = results.routes[0].legs[0].end_location;
                var endlat = results.routes[0].legs[0].end_location.lat();
                var endlng = results.routes[0].legs[0].end_location.lng();
                //เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
                $("#a").val(startlatlng);
                $("#a1").val(startlat);
                $("#a2").val(startlng);
                $("#b").val(endlatlng);
                $("#b1").val(endlat);
                $("#b2").val(endlng);
                // นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
                $("#namePlaceGet").val(addressStart);
                $("#toPlaceGet").val(addressEnd);
                $("#distance_text").val(distanceText);
                var request = {
                    origin: startlatlng,
                    destination: endlatlng,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            });
        }
        $(function () {
            // ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
            searchRoute = function (FromPlace, ToPlace) { // ฟังก์ชัน สำหรับการสร้างเส้นทาง
                if (!FromPlace && !ToPlace) { // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
                    var FromPlace = $("#namePlace").val(); // รับค่าชื่อสถานที่เริ่มต้น
                    var ToPlace = $("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
                }
                // กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
                var request = {
                    origin: FromPlace, // สถานที่เริ่มต้น
                    destination: ToPlace, // สถานที่ปลายทาง
                    travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
                };
                // ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
                directionsService.route(request, function (results, status) {
                    if (status == GGM.DirectionsStatus.OK) { // ถ้าสามารถค้นหา และสร้างเส้นทางได้
                        directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
                        // นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
                        var addressStart = results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
                        var addressEnd = results.routes[0].legs[0].end_address; // สถานที่ปลายทาง
                        var locaStart = results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น
                        var locaEnd = results.routes[0].legs[0].end_location;
                        var distanceText = results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
                        // นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
                        $("#namePlaceGet").val(addressStart);
                        $("#toPlaceGet").val(addressEnd);
                        $("#a").val(locaStart);
                        $("#a1").val(locaStart.lat());
                        $("#a2").val(locaStart.lng());
                        $("#b").val(locaEnd);
                        $("#b1").val(locaEnd.lat());
                        $("#b2").val(locaEnd.lng());
                        $("#distance_text").val(distanceText);
                        // ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
                    } else {
                        // กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
                        // โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
                    }
                });
            }
            // ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
            $("#SearchPlace").click(function () { // เมื่อคลิกที่ปุ่ม id=SearchPlace 
                searchRoute(); // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
            });
            $("#namePlace,#toPlace").keyup(function (event) { // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
                if (event.keyCode == 13 && $(this).val() != "") { // ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
                    searchRoute(); // เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
                }
            });
            $("#iClear").click(function () {
                $("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
            });
        });
        $(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
            }).appendTo("#google_map");
        });
    </script>
 </div>
          </div>
   </div>
</form>
</body>
</html>


โดย:  Komza IP: 158.108.207.xxx วันที่: 09-01-2014 เวลา: 16:08:21

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2
แทรกไว้ส่วนนี้ดู

 $(function() {
  $( "#tabs" ).tabs();
	$("a[href='#tabs-4']").click(function(){
		initialize();
	});
  $( ".moved" ).click(function(){
        var next = $(this).attr("rel");
        $( "#tabs" ).tabs({ active: next });
  });
});
  </script>


โดย:  Ninenik IP: 14.207.32.xxx วันที่: 09-01-2014
 ความคิดเห็นที่ 1
	$("a[href='#tabs-4']").click(function(){
		initialize();
	});


โดย:  Ninenik Narkdee IP: 14.207.32.xxx วันที่: 09-01-2014