ตัวอย่างโค้ดต่อไปนี้ เป็นการสร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมากๆ ด้วยข้อมูล จาก xml ไฟล์ โดยใน xml ไฟล์ จะมีการเก็บข้อมูลที่จำเป็นสำหรับการนำมาใช้ เช่น
ชื่อสถานที่ ตำแหน่ง latitude และ longitude ของสถานที่ สามารถศึกษาการสร้าง xml จากฐานข้อมูลได้ที่
https://www.ninenik.com/การดึงข้อมูล_จากฐานข้อมูล_สร้าง_xml_ไฟล์_ด้วย_php-335.html
โดยในที่นี้จะใช้งานไฟล์ xml จากการสร้างด้วย php ไฟล์ แทนการเรียกไฟล์ xml โดยตรง
คือใช้ genMarker.php ที่ส่งค่ากลับมาเป็น xml ไฟล์ (ไม่ได้บันทึกเป็น xml ไฟล์ไว้)
แทน genMarker.xml ที่เป็นไฟล์โดยตรง (ไฟล์ที่ได้จากการสร้างด้วย php และบันทึกเป็น xml ไฟล์ไว้ใช้งาน)
โค้ดไฟล์ genMarker.php ดึงข้อมูลจังหวัดและตำแหน่งในแผนที่ google map
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php header( "Content-type:text/xml; charset=UTF-8" ); header( "Cache-Control: no-store, no-cache, must-revalidate" ); header( "Cache-Control: post-check=0, pre-check=0" , false); mysql_connect( "localhost" , "root" , "test" ) or die ( "Cannot connect the Server" ); mysql_select_db( "test" ) or die ( "Cannot select database" ); mysql_query( "set character set utf8" ); echo '<?xml version="1.0" encoding="utf-8"?>' ; ?> <markers> <?php $q = "SELECT * FROM province_latlng WHERE 1 ORDER BY province_id LIMIT 30 " ; $qr =mysql_query( $q ); while ( $rs =mysql_fetch_array( $qr )){ ?> <marker id= "<?=$rs['province_id']?>" > <name><?= $rs [ 'province_name' ]?></name> <latitude><?= $rs [ 'province_lat' ]?></latitude> <longitude><?= $rs [ 'province_lon' ]?></longitude> </marker> <?php } ?> </markers> |
เมื่อมีข้อมูลตำแหน่งต่างๆ พร้อมแล้ว จะใช้ jQuery ให้การดึงข้อมูลใน xml ไฟล์มาสร้างตัว marker ในแผนที่ ศึกษาการใช้งาน jQuery กับ xml ได้ที่
https://www.ninenik.com/การดึง_attribute_และค่าต่างๆ_จาก_xml_ไฟล์ด้วย_jQuery_อย่างง่าย-333.html
ตัวอย่างโค้ด
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>Google Map API 3 - 01</title> <style type= "text/css" > html { height: 100% } body { height:100%; margin:0;padding:0; font-family:tahoma, "Microsoft Sans Serif" , sans-serif, Verdana; font-size:12px; } /* css กำหนดความกว้าง ความสูงของแผนที่ */ #map_canvas { width:450px; height:500px; margin:auto; margin-top:50px; } </style> </head> <body> <div id= "map_canvas" ></div> <script type= "text/javascript" src= "js/jquery-1.4.2.min.js" ></script> <script type= "text/javascript" > var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น function initialize() { // ฟังก์ชันแสดงแผนที่ GGM= new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM // กำหนดจุดเริ่มต้นของแผนที่ var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800); // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$( "#map_canvas" )[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 7, // กำหนดขนาดการ zoom center: my_Latlng , // กำหนดจุดกึ่งกลาง mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ position:GGM.ControlPosition.TOP, // จัดตำแหน่ง style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style } }; map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map $.ajax({ url: "genMarker.php" , // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml dataType: "xml" , success: function (xml){ $(xml).find( 'marker' ).each( function (){ // วนลูปดึงค่าข้อมูลมาสร้าง marker var markerID=$(this).attr( "id" ); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerName=$(this).find( "name" ).text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLat=$(this).find( "latitude" ).text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLng=$(this).find( "longitude" ).text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLatLng= new GGM.LatLng(markerLat,markerLng); var my_Marker = new GGM.Marker({ // สร้างตัว marker position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // console.log($(this).find("id").text()); }); } }); } $( 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> |