API

สร้างเว็บไซต์แสดงพิกัดบน Map โดยใช้ Google spreadsheet เก็บข้อมูลอย่างง่าย

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

  1. ทำการสร้างข้อมูลให้ครบถ้วน ผ่าน 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

จะได้เป็นดังข้างล่างนี้

https://spreadsheets.google.com/feeds/list/1jpKjAt6qn4OoNOg4CyDZ-KScb9bi5noAa0z8ratosqE/1/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 เรียบร้อย : )

พิกัดโรงพยาบาล จากเว็บไซต์แสดงข้อมูลเปิด (Open Data) โรงพยาบาล

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

พบกันในบทความถัดไปครับ