เมื่อต้องการใช้ Google Map Javascript API สร้าง Marker และ InfoWindow หลายๆอัน ใน Map เดียว

September 16, 2015 5:12 pm Google Map

วันนี้นั่งเล่น Google Map API แล้วต้องการเอาตัว Marker ติดไว้ใน Map แล้วแต่ละ Marker จะมี Infowindow ของตัวมันเองอยู่ พอเขียนไปเขียนปรากฏว่า ตัว Marker นั้น ยึดตัว Infowindow ที่อยู่หลังสุดเป็นหลัก ทำให้ตัว Marker นั้นใช้ Infowindow เหมือนกันทุกตัว นั้นคือตัว Infowindow ตัวสุดท้ายที่เราเพิ่มเข้าไป

การแก้ปัญหาของปัญหานี้ จะต้องใช้วิธีการ SetContent ตอนมีการสร้าง Event บนตัว Marker โดยเราจะต้องสร้างตัวแปรของ Event เอาไว้ก่อน แล้วจึงค่อย setContent เข้าไปทีละตัวให้ Marker โดยตัวอย่าง Code อยู่ด้านล่างครับ

จะเห็นได้ว่า จะมีการสร้างตัวต้นแบบของ Infowindow ขึ้นมาก่อนในขั้นตอน Initialization แล้วจึงค่อยๆเพิ่มข้อมูลลงใน Infowindow ด้วย Function setContent เข้าไปทีหลัง ทำให้ตัว Marker ยึดกับตัว Infowindow ของตัวเอง ลองใช้กันดูนะครับ

Simple icons 2015-09-16 17-14-25

อ้างอิง :: https://developers.google.com/maps/documentation/javascript/markers, https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple