หากเรามีโจทย์ที่จะทำระบบแผนที่สักเว็บไซต์หนึ่ง สิ่งที่เราต้องทำแน่ๆ ก็คือ การพัฒนาเว็บไซต์ (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
พบกันในบทความถัดไปครับ