PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แสดง google map ใน jQuery Mobile ตอนที่ 9

02 August 2014 By


เนื้อหา jquery mobile ตอนที่ 9 จะเป็นการศึกษา และวิธีการ
นำ google map มาแสดงใน jquery mobile ทดสอบตามตัวอย่างได้เลย
 
1. เริ่มต้น สร้างโครงหลักหน้าเว็บ สำหรับ jquery mobile 
 
ตัวอย่างหน้าแรก สำหรับลิ้งค์ไป หน้าแสดง google map 
ในที่ใช้ชื่อ ex8_1.php (กำหนดชื่อตามต้องการ)
 
 
โค้ดไฟล์ ex8_1.php
 
<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >
            <ul>
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>
                <li><a href="#" data-icon="audio">เมนู 3</a></li>
                <li><a href="#" data-icon="alert">เมนู 4</a></li>
                <li><a href="#" data-icon="gear">เมนู 5</a></li>
            </ul>
        </div><!-- /navbar -->        
	</div><!-- /header -->

	<div data-role="content">
<!--BEGIN ส่วนของเนื้อหาในเพจ     -->


<!--สำหรับกดลิ้งค์ไปหน้า แผนที่-->
<a href="ex8_map.php" class="ui-btn ui-corner-all">Go to map</a>
<br>
<br>



<!--       แผนที่จะแสดงใน div id นี้-->
    </div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">     
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
    

    
</div><!-- /page -->
<script type="text/javascript">
$(function(){



});
</script>

</body>
</html>
 
 
2. สร้างไฟล์ สำหรับ แสดงแผนที่ ในที่นี้ ใช้ชื่อ ex8_map.php
ในหน้านี้ อย่าลืมกำหนด id ของ เพจ เป็น map-page
ดังนี้ 

<div data-role="page" id="map-page">
 
เพื่อสำหรับตรวจสอบก่อนเรียกใช้งาน การแสดงแผนที่
 
โค้ดไฟล์ ex8_map.php
 
 
3. ในขั้นตอนที่ 3 จะกลับมาแก้ไขไฟล์ ex8_1.php 
โดยจะเพิ่มการเรียกใช้ google map ไลบรารี่ และกำหนด css แสดง
แผนที่ ตามโค้ดต่อไปนี้
 
<!--    เรียกใช้ google map ไลบรารี่ -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<style type="text/css">
/*	กำหนด css แสดง แผนที่*/
    div#map_canvas{    
        margin:auto;    
        width:100%;    
        height:300px;    
        overflow:hidden;    
    }    
    </style>        
 
 
โดยจะแทรกโค้ดไว้ด้านบน ใน header ของไฟล์ ex8_1.php
 
4. สร้างฟังก์ชั่นแสดง แผนที่ และเรียกใช้งาน 
ในขั้นตอนที่ 4 จะเป็นการสร้างฟังก์ชั่น แสดงแผนที่ ในที่นี้ เป็นการเรียกใช้
คุณสมบัติ ระบุตำแหน่งปัจจุบัน ในแผนที่ หากทดสอบ แล้วมีการร้องของอนุญาต
เข้าถึงตำแหน่งปัจจุบีนให้ตอบ ตกลง หรือ อนุญาต เพื่อแผนที่จะได้ทำงานถูกต้อง
 
ตัวอย่าง ไฟล์ ex8_1.php ผลลัพธ์
 

 
ตัวอย่างโค้ดไฟล์ ex8_1.php 
พร้อมโค้ดทั้งหมด คำอธิบายแสดงในโค้ด

<!DOCTYPE html> 
<html>
<head>
	<title>ใส่ไตเติล ตามใจชอบ</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
<!--    เรียกใช้ google map ไลบรารี่ -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<style type="text/css">
/*	กำหนด css แสดง แผนที่*/
    div#map_canvas{    
        margin:auto;    
        width:100%;    
        height:300px;    
        overflow:hidden;    
    }    
    </style>        
</head>

<body>

<!-- Start of  page HOME  -->
<div data-role="page" id="page_home">

	<div data-role="header">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
        <div data-role="navbar" >
            <ul>
                <li><a href="#" class="ui-btn-active"  data-icon="heart">เมนู 1</a></li>
                <li><a href="#" data-icon="calendar">เมนู 2</a></li>
                <li><a href="#" data-icon="audio">เมนู 3</a></li>
                <li><a href="#" data-icon="alert">เมนู 4</a></li>
                <li><a href="#" data-icon="gear">เมนู 5</a></li>
            </ul>
        </div><!-- /navbar -->        
	</div><!-- /header -->

	<div data-role="content">
<!--BEGIN ส่วนของเนื้อหาในเพจ     -->


<!--สำหรับกดลิ้งค์ไปหน้า แผนที่-->
<a href="ex8_map.php" class="ui-btn ui-corner-all">Go to map</a>
<br>
<br>



<!--       แผนที่จะแสดงใน div id นี้-->
    </div><!-- /content -->
    
    <div data-role="panel" id="left_panel" data-display="push">
        <ul data-role="listview" data-icon="false"  data-divider-theme="a">
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 1</a></li>
            <li><a href="#">เมนูที่ 2</a></li>
            <li><a href="#">เมนูที่ 3</a></li>
            <li><a href="#">เมนูที่ 4</a></li>            
            <li data-role="list-divider">หัวข้อแบ่ง</li>
            <li><a href="#">เมนูที่ 6</a></li>
            <li><a href="#">เมนูที่ 7</a></li>
        </ul>
    </div><!-- /panel -->        

	<div data-role="footer" data-position="fixed">     
		<h4>ส่วน  footer ใส่ตามใจชอบ</h4>
	</div><!-- /footer -->
    

    
</div><!-- /page -->
<script type="text/javascript">
$(function(){

/*	แสดงแผนที่ เมื่อมีการเปิดไปหน้า แผนที่ อ้างอิง id เพจ map-map*/
	$( document ).on( "pageinit", "#map-page", function() { // เมื่อเริ่มต้นแสดงหน้า แผนที่
		setTimeout(function(){ // ตั้งเวลาหน่วง หรือ delay การเรียกใช้งาน ฟังก์ชั่นแสดงแผนที่
		initialize();	// ฟังก์ชั่นแสดงแผนที่		
		},3000); // กำหนดเวลาหน่วง 3 วินาที่ , 1000 เท่ากับ 1 วินาที
	});	

});
</script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้    
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น    
// ฟังก์ชันสำหรับสร้างแผนที่ ใช้ชื่อว่า 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{    
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
    }    
  
}    
</script>
</body>
</html>



 

Tags:: jquerymobile google map

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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