เนื้อหา 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="//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="//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>
