Google Map

gmaps.js สร้าง Map บนเว็บไซต์ไม่ได้ยากอย่างที่คิด

September 17, 2015

หลายๆคนถ้าพูดถึงการสร้างแผนที่บนเว็บไซต์ และนำมาประยุกต์ในการแสดงผลข้อมูล GIS ของระบบงานตัวเอง คงจะนึกถึง Google Map API กันนะครับ แต่เนื่องจาก Google Map API นั้นค่อนข้างเขียนยาก และนำมาใช้กับการดึงข้อมูลผ่าน Ajax (jQuery) ค่อนข้างลำบาก วันนี้เราจะมารู้จัก Library อีกตัวนึงชื่อว่า “gmaps.js” gmaps.js เป็น Javascript Library ที่ช่วยให้เราสร้างและเรียกใช้งาน Google Map API ได้ง่ายขึ้น โดย Concept ของตัว gmaps.js จะเขียน Style jQuery ครับ ทำให้เราเข้าใจง่าย เขียนใช้งานง่ายมากๆครับ โดยตัว gmaps.js นั้น คลอบคลุมทุก Function พื้นฐานใน Google Map API และรองรับ API Version 3.0 ด้วยครับ […]

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

September 16, 2015

วันนี้นั่งเล่น Google Map API แล้วต้องการเอาตัว Marker ติดไว้ใน Map แล้วแต่ละ Marker จะมี Infowindow ของตัวมันเองอยู่ พอเขียนไปเขียนปรากฏว่า ตัว Marker นั้น ยึดตัว Infowindow ที่อยู่หลังสุดเป็นหลัก ทำให้ตัว Marker นั้นใช้ Infowindow เหมือนกันทุกตัว นั้นคือตัว Infowindow ตัวสุดท้ายที่เราเพิ่มเข้าไป การแก้ปัญหาของปัญหานี้ จะต้องใช้วิธีการ SetContent ตอนมีการสร้าง Event บนตัว Marker โดยเราจะต้องสร้างตัวแปรของ Event เอาไว้ก่อน แล้วจึงค่อย setContent เข้าไปทีละตัวให้ Marker โดยตัวอย่าง Code อยู่ด้านล่างครับ จะเห็นได้ว่า จะมีการสร้างตัวต้นแบบของ Infowindow ขึ้นมาก่อนในขั้นตอน Initialization แล้วจึงค่อยๆเพิ่มข้อมูลลงใน Infowindow ด้วย Function setContent เข้าไปทีหลัง […]