แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง 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,144
แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง ใน google map ตอนที่ 3	อ่าน 15,374

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 บาท หรือ ระบุจำนวน