แสดงแผนที่ 2 แผนที่ ด้วย google map ใน jqueryui tab

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
jqueryui google map tab

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jqueryui google map tab



ในการแสดงแผนที่ มากกว่า 1 แผนที่ ในหน้าเพจใดๆ นั้น สิ่งจำเป็น
คือ อย่างน้อยต้องมีการเรียกใช้งาน การแสดงแผนที่ อย่างน้อย 1 แผนที่ก่อน
 
เนื้อหาส่วนนี้ เป็นการ ประยุกต์ เพื่อเป็นแนวทาง สำหรับเอาไปใช้งานอื่นๆ เพิ่มเติม
สิ่งที่ต้องการคือ ต้องการแสดงแผนที่ ใน jqueryui tab ที่ tab ที่ 2 และ 3
 
ในที่นี้จะทำแบบอย่างง่าย การใช้งานอย่างอื่นที่มากกว่า จำเป็นต้องประยุกต์ และใช้
ความเข้าใจเพิ่มเติม
 
เริ่มต้น ให้สร้าง แผนที่ แสดงใน tab ที่ 3 แผนที่ เดียวก่อน ตามโค้ดด้านล่าง

<!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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<?php    
$jquery_ui_v="1.8.5";    
$theme=array(    
    "0"=>"base",    
    "1"=>"black-tie",    
    "2"=>"blitzer",    
    "3"=>"cupertino",    
    "4"=>"dark-hive",    
    "5"=>"dot-luv",    
    "6"=>"eggplant",    
    "7"=>"excite-bike",    
    "8"=>"flick",    
    "9"=>"hot-sneaks",    
    "10"=>"humanity",    
    "11"=>"le-frog",    
    "12"=>"mint-choc",    
    "13"=>"overcast",    
    "14"=>"pepper-grinder",    
    "15"=>"redmond",    
    "16"=>"smoothness",    
    "17"=>"south-street",    
    "18"=>"start",    
    "19"=>"sunny",    
    "20"=>"swanky-purse",    
    "21"=>"trontastic",    
    "22"=>"ui-darkness",    
    "23"=>"ui-lightness",    
    "24"=>"vader"    
);    
$jquery_ui_theme=$theme[14];    
?>    
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />    
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/jquery-ui.min.js"></script>
<style type="text/css">    
html,body{  
    padding:0px;  
    margin:0px;  
}  
body{
	font-size:12px;	
}
div.test_demo_main{
	margin:auto;
	width:75%;	
}
/* ปรับขนาดตัวอักษรของข้อความใน tabs   
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs  
*/    
.ui-tabs{    
    font-family:tahoma;    
    font-size:11px;    
}    

div#map_canvas{  
    margin:auto;  
    width:600px;  
    height:550px;  
    overflow:hidden;  
}  
</style>    

</head>

<body>



<div class="test_demo_main">

<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>  
    </ul>  
    <div id="tabs-1">  
        <p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>  
    </div>  
    <div id="tabs-2">  
        <p>รายละเอียดย่อยหัวข้อแท็บที่ 2</p>  
    </div>  
    <div id="tabs-3">  
        <p>
        
  <div id="map_canvas"></div>  

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


</div>


<script type="text/javascript">  
$(function(){  


    // แทรกโค้ต jquery  
    // กำหนดแบบทั่วไป  
    $("#tabs").tabs();   
	$("a[href='#tabs-3']").click(function(){  
		initialize();  
	});  		
  

});  
</script>  
<script type="text/javascript">  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
// ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 1 ใช้ชื่อว่า initialize()
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    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 , // กำหนดจุดกึ่งกลาง  
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
  
  
  
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี  
    if(navigator.geolocation){  
            navigator.geolocation.getCurrentPosition(function(position){  
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);  
                var infowindow = new GGM.InfoWindow({  
                    map: map,  
                    position: pos,  
                    content: "คุณอยู่ที่นี่."  
                });  
                  
                var my_Point = infowindow.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
                map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker              
                map.setCenter(pos);  
            },function() {  
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
            });  
    }else{  
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
    }  

}  

$(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>    
</body>
</html>
 
ต่อไป ให้เพิ่ม ส่วนสำหรับ แผนที่ตัวที่ 2
เพิ่มส่วนของ css
 
div#map_canvas2{  
    margin:auto;  
    width:600px;  
    height:550px;  
    overflow:hidden;  
}
 
เพื่อส่วนของ html สำหรับแสดง แผนที่ ใน tab ที่ 2
 
        <div id="map_canvas2"></div>  
        <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">    
        <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    
        Latitude    
        <input name="lat_value" type="text" id="lat_value" value="0" />  <br />  
        Longitude    
        <input name="lon_value" type="text" id="lon_value" value="0" />  <br />  
        Zoom    
        <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />    
        <br />  
        <input type="submit" name="button" id="button" value="บันทึก" />    
        </form>    
        </div>
 
 
และสุดท้าย เพิ่มในส่วนของ javascript ฟังก์ชันสร้าง แผนที่ google map ที่ 2
ในตัวอย่างนี้ ฟังก์ชั่น ใช้ชื่อ initialize2() เป็นฟังก์ชั่นสำหรับแสดงผนที่ โดยใช้
ในการทำงาน ลาก ตัว marker แล้ว แสดงตำแหน่งพิกัด
 
// ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 2 ใช้ชื่อว่า initialize2()
function initialize2() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas2")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 13, // กำหนดขนาดการ zoom  
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
      
    var my_Marker = new GGM.Marker({ // สร้างตัว marker  
        position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
    });  
      
    // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร  
    GGM.event.addListener(my_Marker, "dragend", function() {  
        var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker         
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
    });       
  
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
    GGM.event.addListener(map, "zoom_changed", function() {  
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
    });  
  
}
และการเรียกใช้เมื่อ คลิก tab ที่ 2
 
	$("a[href='#tabs-2']").click(function(){  
		initialize2();  
	});

 
ตัวอย่างผลลัพธ์
 

รายละเอียดย่อยหัวข้อแท็บที่ 1

Latitude
Longitude
Zoom

 
ตัวอย่างโค้ดทั้งหมด
 
<!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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<?php    
$jquery_ui_v="1.8.5";    
$theme=array(    
    "0"=>"base",    
    "1"=>"black-tie",    
    "2"=>"blitzer",    
    "3"=>"cupertino",    
    "4"=>"dark-hive",    
    "5"=>"dot-luv",    
    "6"=>"eggplant",    
    "7"=>"excite-bike",    
    "8"=>"flick",    
    "9"=>"hot-sneaks",    
    "10"=>"humanity",    
    "11"=>"le-frog",    
    "12"=>"mint-choc",    
    "13"=>"overcast",    
    "14"=>"pepper-grinder",    
    "15"=>"redmond",    
    "16"=>"smoothness",    
    "17"=>"south-street",    
    "18"=>"start",    
    "19"=>"sunny",    
    "20"=>"swanky-purse",    
    "21"=>"trontastic",    
    "22"=>"ui-darkness",    
    "23"=>"ui-lightness",    
    "24"=>"vader"    
);    
$jquery_ui_theme=$theme[14];    
?>    
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />    
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/jquery-ui.min.js"></script>
<style type="text/css">    
html,body{  
    padding:0px;  
    margin:0px;  
}  
body{
	font-size:12px;	
}
div.test_demo_main{
	margin:auto;
	width:75%;	
}
/* ปรับขนาดตัวอักษรของข้อความใน tabs   
สามารถปรับเปลี่ยน รายละเอียดอื่นๆ เพิ่มเติมเกี่ยวกับ tabs  
*/    
.ui-tabs{    
    font-family:tahoma;    
    font-size:11px;    
}    

div#map_canvas{  
    margin:auto;  
    width:600px;  
    height:550px;  
    overflow:hidden;  
}  
div#map_canvas2{  
    margin:auto;  
    width:600px;  
    height:550px;  
    overflow:hidden;  
}  
</style>    

</head>

<body>



<div class="test_demo_main">

<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>  
    </ul>  
    <div id="tabs-1">  
        <p>รายละเอียดย่อยหัวข้อแท็บที่ 1</p>  
    </div>  
    <div id="tabs-2">  
        <p>
        
  <div id="map_canvas2"></div>  
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">    
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    
    Latitude    
    <input name="lat_value" type="text" id="lat_value" value="0" />  <br />  
    Longitude    
    <input name="lon_value" type="text" id="lon_value" value="0" />  <br />  
  Zoom    
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />    
  <br />  
  <input type="submit" name="button" id="button" value="บันทึก" />    
  </form>    
</div>         
        
        </p>  
    </div>  
    <div id="tabs-3">  
        <p>
        
  <div id="map_canvas"></div>  

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


</div>


<script type="text/javascript">  
$(function(){  


    // แทรกโค้ต jquery  
    // กำหนดแบบทั่วไป  
    $("#tabs").tabs();   
	$("a[href='#tabs-2']").click(function(){  
		initialize2();  
	});  	
	$("a[href='#tabs-3']").click(function(){  
		initialize();  
	});  		
  

});  
</script>  
<script type="text/javascript">  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
// ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 1 ใช้ชื่อว่า initialize()
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    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 , // กำหนดจุดกึ่งกลาง  
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
  
  
  
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี  
    if(navigator.geolocation){  
            navigator.geolocation.getCurrentPosition(function(position){  
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);  
                var infowindow = new GGM.InfoWindow({  
                    map: map,  
                    position: pos,  
                    content: "คุณอยู่ที่นี่."  
                });  
                  
                var my_Point = infowindow.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
                map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker              
                map.setCenter(pos);  
            },function() {  
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
            });  
    }else{  
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
    }  

}  

// ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 2 ใช้ชื่อว่า initialize2()
function initialize2() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas2")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 13, // กำหนดขนาดการ zoom  
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
      
    var my_Marker = new GGM.Marker({ // สร้างตัว marker  
        position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
        draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้  
        title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
    });  
      
    // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร  
    GGM.event.addListener(my_Marker, "dragend", function() {  
        var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker         
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value  
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value   
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
    });       
  
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
    GGM.event.addListener(map, "zoom_changed", function() {  
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value    
    });  
  
}  
$(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>    
</body>
</html>
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: google map tab jqueryui







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ