เนื้อหา jquery mobile ตอนที่ 9 จะเป็นการศึกษา และวิธีการ
นำ google map มาแสดงใน jquery mobile ทดสอบตามตัวอย่างได้เลย
1. เริ่มต้น สร้างโครงหลักหน้าเว็บ สำหรับ jquery mobile
ตัวอย่างหน้าแรก สำหรับลิ้งค์ไป หน้าแสดง google map
ในที่ใช้ชื่อ ex8_1.php (กำหนดชื่อตามต้องการ)
โค้ดไฟล์ ex8_1.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!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
ดังนี้
1 | <div data-role="page" id="map-page"> |
เพื่อสำหรับตรวจสอบก่อนเรียกใช้งาน การแสดงแผนที่
โค้ดไฟล์ ex8_map.php
3. ในขั้นตอนที่ 3 จะกลับมาแก้ไขไฟล์ ex8_1.php
โดยจะเพิ่มการเรียกใช้ google map ไลบรารี่ และกำหนด css แสดง
แผนที่ ตามโค้ดต่อไปนี้
1 2 3 4 5 6 7 8 9 10 11 | <!-- เรียกใช้ 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
พร้อมโค้ดทั้งหมด คำอธิบายแสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <!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> |
