← Blog

แสดงจุดบนแผนที่และระบบเลือกจุดบนแผนที่

08-10-2020 13:13:14

มีงานแบบหนึ่งที่หลายโครงการต้องการทำ คือสร้างระบบเว็บให้ผู้ใช้เลือกจุดบนแผนที่ แล้วแสดงจุดนั้นภายหลัง เรื่องแผนที่นี้ทำได้หลายแบบ ถ้าจะทำเต็มรูปแบบก็รัน map server เอง แต่ถ้าต้องการแค่ตำแหน่งหรือ Pop-up ง่ายๆ การใช้ Google Maps เป็น engine แผนที่ก็เป็นทางเลือกที่ดี เพราะคนคุ้นเคย และทำค่อนข้างง่าย

ที่ว่าง่ายนั้นเป็นเพราะ Google Maps มี API แผนที่ให้ใช้บริการ เราต้องเปิดใช้ จะได้ API Key มา โดยมี limit การใช้งานประมาณหนึ่ง ถ้าเกินกว่านั้นจะเริ่มต้องเสียเงิน ถ้าประเมินแล้วว่างบประมาณรับได้ก็ลุยเลย

วิธีการแสดงแผนที่พร้อมพิกัด Lat/Long คือเรียก script Google Maps API ตาม spec ที่เอกสารของ Google Maps กำหนด แล้วเขียน JavaScript ให้เรียก function initMap() โดยให้ function นี้ instantiate Map class ใหม่ โดยใน function argument ให้กำหนด DOM element ที่ต้องการให้แสดงแผนที่ และกำหนด Zoom level และค่าอื่นๆ ได้เป็นค่าตั้งต้น จากนั้น instantiate Marker class โดยกำหนด position Lat/Lng (ซึ่งอาจเป็นตัวแปรที่ให้ front-end ดึงมาจาก back-end ด้วยวิธีการที่ถนัด ไม่ว่าจะเป็นการฝังลงไปใน HTML DOM โดยตรง หรือใช้ fetch API) และกำหนดให้ใช้แผนที่ที่เพิ่ง instantiate ก่อนหน้า เท่านี้ก็สามารถแสดงแผนที่พร้อมจุด Marker ที่อยู่พิกัดที่ต้องการได้

ส่วนในขาเข้า ตอนที่ให้ผู้ใช้เลือกพิกัดบนแผนที่ ก็ใช้ Google Maps API เช่นกัน แต่การ implement จะยุ่งยากกว่า ทีม Dollapak Suwanpunya จึงช่วย research จนพบ library สำเร็จรูปที่ชื่อ location-picker โดยเรียกใช้ lib นี้จาก CDN แล้วเขียน JavaScript โดย instantiate locationPicker class ตั้ง argument เป็น HTML DOM Id ที่จะแสดงแผนที่ กำหนดค่าตั้งต้น เช่น setCurrentPosition ให้เป็น true เพื่อเลือก location อัตโนมัติตามตำแหน่งปัจจุบันของอุปกรณ์ จากนั้นให้ เรียก function addListener ใน google maps event module โดยให้ listen 'idle' event ซึ่งก็คือเมื่อแผนที่อยู่นิ่งๆ แล้วใน callback ก็เรียก function getMarkerPosition() จาก locationPicker แล้วบันทึก location.lat และ location.lng โดยใช้เทคนิคที่ต้องการ

Tags:  maps geolocation