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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง 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 1.20.241.xxx 13-03-2020 20:53:55

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

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


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


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

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

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


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


Pitchakorn Baramee 1.20.241.xxx 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อ่าน 18,012
แสดงสถานที่จากฐานข้อมูล ตามเส้นทาง ใน google map ตอนที่ 3อ่าน 12,283
ninenik 223.24.169.xxx 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 1.0.209.xxx 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 27.55.69.xxx 14-03-2020
 ความคิดเห็นที่ 5
ขอบคุณมากครับ ใช้งานได้แล้วครับ


Pitchakorn Baramee 1.0.209.xxx 14-03-2020 11:38
1






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