วันพุธที่ 12 ตุลาคม พ.ศ. 2554

Google Maps Markers with Ajax & JQuery ตอนที่ 1

การกำหนดจุด Markers บนแผนที่ Google Maps นั้นหากเราเขียนโดยกำหนดจุดเป็นพอยต์ๆไป โค๊ดมันก็จะดูเยอะมากๆ แล้วถ้าเราเก็บข้อมูลของ Markers ไว้ใน database เวลาเราจะกำหนด Markers นั้นๆลงใน Google Maps เราก็จะต้องให้ server ส่งข้อมูลมาเก็บไว้ที่ฝั่ง client เสียก่อน แล้วลองคิดดูว่าถ้าข้อมูลของ Markers ใน Database มีหลาย categories และมีขนาดใหญ่มากๆ เราก็จะต้องโหลดข้อมูลทั้งหมดลงใน Database ซึ่งเป็นการส่งข้อมูลที่เยอะมากๆ ผมก็เลยทำให้การกำหนดจุด Markers นั้นเป็นแบบ Ajax แทนแบบปกติทั่วไป เพื่อลดการส่งข้อมูลทีละเยอะๆ โดยใช้การส่งข้อมูลในรูปแบบ XML ที่ return ค่ามาจาก server (ในที่นี้ผมใช้ php เป็นภาษาฝั่ง server side) โดยใน database นั้นจะเก็บข้อมูลชื่อของ Point และ Point ต่างๆ แล้วใช้ php เจนโค๊ด (XML Code Generator) ออกมาเป็น XML โดย XML ของผมมีรูปแบบที่ผมกำหนดไว้แบบนี้คับ

markers
  marker id="..."
    name .... /name
    latlng .... /latlng
  /marker
/markers

ส่วนใน php code ผมก็จะมีวิธีการส่งข้อมูลออกมาดังนี้คับ