รบกวนด้วยครับดึงข้อมูลจากฐานข้อมูลมาแสดงใน google map ครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนด้วยครับดึงข้อมูลจากฐานข้อมูลมาแสดงใน google map ครับ
รบกวนด้วยครับดึงข้อมูลจากฐานข้อมูลมาแสดงใน google map ครับ
Copy
นำไปใช้แล้ว จอขาวครับ
mapmap.php <!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>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:550px; height:400px; margin:auto; margin-top:100px; } </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 my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker var infowindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ 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); 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 my_Marker = new GGM.Marker({ // สร้างตัว marker position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map // draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้ title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); infowindow = new GGM.InfoWindow({ content:$.ajax({ url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง async:false }).responseText }); // กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง infowindows GGM.event.addListener(my_Marker, 'click', function() { infowindow.open(map,my_Marker); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว }); // กำหนด event ให้กับตัวแผนที่ เมื่อส่วนของแผนที่ทำการโหลดเรียบร้อยแล้ว GGM.event.addListener(map, 'tilesloaded', function() { infowindow.open(map,my_Marker); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว }); } $(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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize" }).appendTo("body"); }); </script> </body> </html> placeDetail.php <?php header("Content-type:text/html; charset=tis-620"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); ?> <?php include"connect.php"; $id_prd=108; $sql="select * from tb_product where id_prd='$id_prd' "; $result=mysql_db_query($db_Name,$sql); $rs=mysql_fetch_array($result); $id_prd=$rs[id_prd]; $code=sprintf("%05d",$id_prd); $name_prd=$rs[name_prd]; $detail_prd=$rs[detail_prd]; $ref_id_type=$rs[ref_id_type]; $ref_id_type_lease=$rs[ref_id_type_lease]; $price_prd=$rs[price_prd]; $photo_prd=$rs[photo_prd]; $address_prd=$rs[address_prd]; $tel_prd=$rs[tel_prd]; $sql2="select name_type from tb_type where id_type='$ref_id_type' "; $result2=mysql_db_query($db_Name,$sql2); $rs2=mysql_fetch_array($result2); $name_type=$rs2[name_type]; $sql3="select name_type_lease from tb_type_lease where id_type_lease='$ref_id_type_lease' "; $result3=mysql_db_query($db_Name,$sql3); $rs3=mysql_fetch_array($result3); $name_type_lease=$rs3[name_type_lease]; ?> </p> <div align="center"> <table width="745" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="37%" rowspan="5"><img src="photo/<?=$photo_prd?>" width="400" height="334"></td> <td colspan="2" bgcolor="#99CCFF"><div align="center" class="style2"> <div align="left" class="style4"> <div align="center">ประเภทหอพัก </div> </div> </div> <div align="left" class="style2"> <div align="center"> <?=$name_type?> </div> </div> <div align="center" class="style2"> <div align="left" class="style4"> <div align="center">ประเภทการเช่า</div> </div> </div> <div align="center"><span class="style2"> <?=$name_type_lease?> </span> </div> <div align="center" class="style3"> <div align="left" class="style7"> <div align="center">ชื่อหอพัก</div> </div> </div> <div align="left" class="style2"> <div align="center"> <?=$name_prd?> </div> </div> <div align="center" class="style3"> <div align="left" class="style7"> <div align="center">ราคา </div> </div> </div> <div align="left" class="style2"> <div align="center"> <?=$price_prd?> </div> </div> <div align="center" class="style3"> <div align="left" class="style7"> <div align="center">รายละเอียด </div> </div> </div> <div align="left" class="style2"> <div align="center"> <?=$detail_prd?> </div> </div> <div align="center" class="style3"> <div align="left" class="style7"> <div align="center">ที่อยู่หอพัก</div> </div> </div> <div align="left" class="style2"> <div align="center"> <?=$address_prd?> </div> </div> <div align="center" class="style3"> <p align="center" class="style7">หมายเลขโทรศัพท์</p> </div> <div align="left" class="style2"> <div align="center"> <?=$tel_prd?> </p> </div> </div> <tr> <td> </td> <td><a href="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg" target="_blank">ลิ้งค์อ่านเพิ่ม</a></td> </tr> </table>

คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ