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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ใช้ 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">

<head>

<title>Untitled Document</title>

</head>

<body>

$(function() {

$( "#tabs" ).tabs();

$( ".moved" ).click(function(){

var next = $(this).attr("rel");

$( "#tabs" ).tabs({ active: next });

});

</script>

<ul>

</ul>

<p>

$(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>

<br>

เลือกไฟล์ที่ต้องการ : <input type='file' name='browse' onchange='Test.UpdatePreview(this)' />

<tr>

<td width="170"><div align="right">ที่อยู่ปัจจุบัน บ้านเลขที่</div></td>

<td width="150"><div align="right">อำเภอ/เขต </div></td>

<option value=""> ------- เลือก ------ </option>

</select><span id="waitAmphur1"></span></td>

</tr>

<tr>

<option value=""> ------- เลือก ------ </option>

</select><span id="waitTumbon1" ></span></td>

</tr>

<tr>

<td><div align="right">รหัสไปรษณีย์</div></td>

</tr>

<tr>

<td><div align="right">โทรศัพท์</div></td>

</tr>

<tr>

<td><div align="right">จังหวัด </div></td>

<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>

</table>

</div>

</p></div></div>

<br />

</p>

<tr>

<td width="174"><div align="right"> นิสิตอยู่ในความปกครองของ

ชื่อ </div></td>

<td width="153"><div align="right">ที่อยู่ปัจจุบัน บ้านเลขที่ </div></td>

</tr>

<tr>

<div align="right">นามสกุล</div>

</label></td>

</tr>

<tr>

</tr>

<tr>

<td><div align="right">สถานภาพ</div></td>

<option value="ยังมีชีวิต">ยังมีชีวิต</option>

<option value="ถึงแก่กรรม">ถึงแก่กรรม</option>

</select></td>

</tr>

<tr>

<td><div align="right">จบการศึกษาขั้นสูงสุด</div></td>

<div align="right">จังหวัด</div>

</div></td>

<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><div align="right">อำเภอ/เขต</div></td>

<option value=""> ------- เลือก ------ </option>

</select>

</tr>

<tr>

<td><div align="right">เลขบัตรประจำตัวประชาชน</div></td>

<option value=""> ------- เลือก ------ </option>

</select>

</tr>

<tr>

<td><div align="right">เลขที่บัตรประจำตัวผู้เสียภาษี</div></td>

<td><div align="right">รหัสไปรษณีย์</div></td>

</tr>

<tr>

<td><div align="right">อาชีพ</div></td>

<option value="รับราชการ">รับราชการ</option>

<option value="ผนักงานรัฐวิสาหกิจ">ผนักงานรัฐวิสาหกิจ</option>

<option value="เกษตรกร">เกษตรกร</option>

</select></td>

<td><div align="right">โทรศัพท์</div></td>

</tr>

<tr>

<td><div align="right">รายได้ปีละ</div></td>

บาท</td>

<td><div align="right">เกี่ยวข้องกับข้าพเจ้าโดยเป็น</div></td>

</tr>

<tr>

<td><div align="right">ระบุเพิ่มเติมให้ชัดเจน</div></td>

</tr>

</table>

</div>

<p>

</p>

</div></div>

<h2>แผนผังที่อยู่บ้าน</h2>

<br />

</div>

/* 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>

From:

To:

<br />

<hr />

From:

To:

เริ่มต้น

ปลายทาง

<br />

ระยะทาง

* ระยะทางโดยประมาณ <br />

</div>

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>

</form>

</body>

</html>

Komza 158.108.207.xxx 09-01-2014 16:08:21

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

	$("a[href='#tabs-4']").click(function(){
		initialize();
	});

Ninenik Narkdee 14.207.32.xxx 09-01-2014

ความคิดเห็นที่ 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 14.207.32.xxx 09-01-2014

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

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

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