หากเรามีโจทย์ที่จะทำระบบแผนที่สักเว็บไซต์หนึ่ง สิ่งที่เราต้องทำแน่ๆ ก็คือ การพัฒนาเว็บไซต์ (HTML, JavaScript ฯลฯ) แสดงผลแผนที่โดยใช้ Map API และต้องมีฐานข้อมูลเพื่อเก็บข้อมูลเหล่านั้น ซึ่งพอเป็นแบบนั้นแล้ว ก็ดูเหมือนว่าจะมีสิ่งท่ีเราต้องทำมากมาย
แต่วันนี้ผมจะขอแนะนำวิธีการเก็บข้อมูลพิกัดสถานที่อย่างง่ายด้วย Google Spreadsheet กัน ! แบ่งเป็น 3 ขั้นตอน
การสร้างแผนที่พื้นฐาน
ให้ท่านทำการสร้างไฟล์ index.html ขึ้นมา และเรียกใช้แผนที่ตามวิธีข้างล่างได้เลยครับ
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Create Map Sample | Longdo Map</title> <style type="text/css"> html { height: 100%; } body { margin: 0px; height: 100%; } #map { height: 100%; } </style> <script type="text/javascript" src="https://api.longdo.com/map/?key=[YOUR-KEY-API]"></script> <script> var map; function init() { map = new longdo.Map({ placeholder: document.getElementById('map') }); } </script> </head> <body onload="init();"> <div id="map"></div> </body> </html>
** อย่าลืมสมัครคีย์ฟรี และนำมาใส่ที่ [YOUR-KEY-API]
ดูเพิ่มเติม: คู่มือพัฒนาระบบ
การสร้างข้อมูลพิกัดบน Google spreadsheets และการดึงข้อมูล
- ทำการสร้างข้อมูลให้ครบถ้วน ผ่าน https://docs.google.com/spreadsheets/ โดยอย่าลืมสร้าง field ที่มีค่า latitude, longitude สำหรับปักหมุดพิกัดด้วยล่ะ

2. เมื่อสร้างข้อมูลเสร็จแล้ว ไปที่ File -> Publish to the web หลังจากนั้นกดที่ปุ่ม publish


3. การเปิดเป็น JSON format API
หลังจากที่เรา publish แล้วนั้น ให้ท่านสังเกต url ที่อยู่บน address bar จะเป็นลักษณะดังนี้
https://docs.google.com/spreadsheets/d/1jpKjAt6qn4OoNOg4CyDZ-KScb9bi5noAa0z8ratosqE/edit#gid=0
ให้เรานำส่วนที่เป็น uniqe URL มาใส่ใน template URL ตามข้างล่างนี้ แทนที่ในช่อง [unique-URL] และ [sheet-number] จะหมายถึงลำดับของ sheet งานของเราครับ
https://spreadsheets.google.com/feeds/list/[unique-URL]/[sheet-number]/public/basic?alt=json
จะได้เป็นดังข้างล่างนี้

BRAVO!! ทีนี้ท่านก็สามารถไปสู่ขั้นตอนสุดท้าย คือการปักหมุดบนแผนที่ Longdo Map ได้แล้วนั่นเอง
ขั้นตอนสุดท้าย คือ การปักหมุดบนแผนที่ด้วยข้อมูล Json ข้างต้น
ให้เราทำการสร้างฟังก์ชันสำหรับ การดึงข้อมูล และการวาดหมุดขึ้นมา
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Longdo Map Spreadsheet | Longdo Map</title> <style type="text/css"> html { height: 100%; } body { margin: 0px; height: 100%; } #map { height: 100%; } </style> <script type="text/javascript" src="https://api.longdo.com/map/?key="></script> <script> var map; var hospital_list_ggsheet = []; function init() { map = new longdo.Map({ placeholder: document.getElementById('map') }); getSpreadsheet() } function getSpreadsheet() { var request = new XMLHttpRequest(); request.open('GET', 'https://spreadsheets.google.com/feeds/list/1jpKjAt6qn4OoNOg4CyDZ-KScb9bi5noAa0z8ratosqE/1/public/basic?alt=json', true); request.onload = function () { if (this.status >= 200 && this.status < 400) { // Success! var response = JSON.parse(this.response); console.log(response); response.feed.entry.forEach((x) => { hospital_list_ggsheet.push( x.content.$t .replace("depart: ", "") .replace("sub_depart: ", "") .replace("name: ", "") .replace("address: ", "") .replace("lat: ", "") .replace("lon: ", "") .split(", ") ); }); drawLocation(hospital_list_ggsheet); } else { // We reached our target server, but it returned an error } }; request.onerror = function () { // There was a connection error of some sort }; request.send(); } function drawLocation(arr) { arr.forEach((x) => { console.log(x) map.Overlays.add(new longdo.Marker( { lon: Number(x[5]), lat: Number(x[4]) } ) ); }); } </script> </head> <body onload="init();"> <div id="map"></div> </body> </html>
หมายเหตุ อย่าลืมแก้ส่วนการ replace field ของข้อมูลให้ตรงกับ spreadsheet นะครับ : ) แล้วก็ตรงลำดับของ array ด้วย
เป็นอันเสร็จสิ้นการเชื่อมข้อมูลจาก Google Spreadsheet เรียบร้อย : )

ยังมีเทคนิคอีกมากมายที่จะให้นักพัฒนาทุกท่านได้ศึกษา สามารถเข้าร่วมกลุ่ม Longdo Map API Community กันได้ที่นี่เลยครับ : ) https://www.facebook.com/groups/708165893234850
พบกันในบทความถัดไปครับ