แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง google map ต้องการทำให้ infowindow ขึ้นข้อมูลแบบที่แสดงรูปได้

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง google map ต้องการทำให้ infowindow ขึ้นข้อมูลแบบที่แสดงรูปได้

อันนี้คือผมทำจาก https://www.ninenik.com/content.php?arti_id=328 อันนี้ คือดึงจากฐานข้อมูลมาแสดงทั้งหมด หน้า infowindow ก็จะประมาณนี้

และผมทำหน้า แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง google map ตามอันนี้ https://www.ninenik.com/แสดงสถานที่จากฐานข้อมูล_ตามเส้นทาง_ใน_google_map_ตอนที่_3-652.html

แต่ผมอยากให้ infowindow มันแสดงแบบข้างบน ที่มีรูปภาพด้วย อะครับ

Pitchakorn Baramee 13-03-2020 20:53:55

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

อันนี้คือผมทำจาก https://www.ninenik.com/content.php?arti_id=328 อันนี้ คือดึงจากฐานข้อมูลมาแสดงทั้งหมด หน้า infowindow ก็จะประมาณนี้

รูปข้างบนไม่ขึ้นครับ

Pitchakorn Baramee 13-03-2020 20:56

ความคิดเห็นที่ 2

เปลี่ยนส่วนของ content จาก ตัวแปร string เป็นดึงจากฐานข้อมูลแทน

var contentStr = '<h3>'+placeDetail.title '</h3>';
contentStr +='<br>Latitude:'+placeDetail.latitude;
contentStr +='<br>Longitude:'+placeDetail.longitude;
infowindow.setContent(contentStr);

เป็น

var contentStr = $.ajax({
url:'placeDetail.php' // ถ้ามีการส่งค่าตัวแปร ก็กำหนดเป็น placeDetail.php?id=placeDetail.title
}).responseText;
infowindow.setContent(contentStr);

ชื่อตัวแปร เช่น id เปลี่ยนเป็นค่าเราเองให้สอดคล้อง

ค่าคัวแปร เช่น placeDetail.title เปลี่ยนเป็นค่าที่ต้องการส่งไปดึงข้อมูล

บทความแนะนำที่เกี่ยวข้อง
การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery	อ่าน 20,374
แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง ใน google map ตอนที่ 3	อ่าน 15,697

ninenik 13-03-2020

ความคิดเห็นที่ 3

ตอนนี้ไม่ขึ้นข้อมูลเลยครับ เหมือนยังไม่สามารถดึงข้อมูลมาจาก placeDetail.php ได้

// สร้าง marker บทแผนที่
   createMarker = function(place,placeDetail) {
       var placeLoc=place;
         
       // หรือกำหนดเอง สามารถโหลดรุปมา หรือเรียกใช้งานจาก path ตรงได้
       // https://mapicons.mapsmarker.com/ สร้างรุป icon หรือเลือกรูปได้จากที่นี้    
       //var image="busstop.png";
       var image="images/sign_stop.png";
 
       var marker=new GGM.Marker({
           map:map,
           icon: image,
           position:placeLoc
       });
 
       GGM.event.addListener(marker,'click',function(){
           console.log(place);
           infowindow = new GGM.InfoWindow();
           var contentStr = $.ajax({
               url:'placeDetail2.php' // ถ้ามีการส่งค่าตัวแปร ก็กำหนดเป็น placeDetail.php?id=placeDetail.title
               }).responseText;
           infowindow.setContent(contentStr);
           infowindow.open(map,marker);
       });     
       gmarkers.push(marker);
   }

Pitchakorn Baramee 14-03-2020 10:13

ความคิดเห็นที่ 4

เหมือน คำสั่ง ajax มีการปรับเปลี่ยนเล็กน้อย ถ้ากำหนด async:false เข้าไปจะสามารถใช้งานได้

$.ajax({
            url:'placeDetail2.php' // ถ้ามีการส่งค่าตัวแปร ก็กำหนดเป็น placeDetail.php?id=placeDetail.title
            async:false
        }).responseText

แต่จะมีผลให้เป็น sync เป้น true ซึ่งบราวเซอร์จะเริ่มยกเลิกค่านี้แล้ว มีผลในอนาคตอาจจะใช้งานไม่ได้

ให้เปลี่ยนรูปแบบเป็น แบบนี้แทน

GGM.event.addListener(marker,'click',function(){
    console.log(place);
 $.ajax({
     url:'placeDetail2.php' // ถ้ามีการส่งค่าตัวแปร ก็กำหนดเป็น placeDetail.php?id=placeDetail.title
 }).done(function( data) {
     infowindow = new GGM.InfoWindow();
     infowindow.setContent(data);
     infowindow.open(map,marker);          
 });                
});

ตัวอย่าง DEMO

ninenik 14-03-2020

ความคิดเห็นที่ 5

ขอบคุณมากครับ ใช้งานได้แล้วครับ

Pitchakorn Baramee 14-03-2020 11:38

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน