การนำข้อมูลจาก Google Spreadsheets ไปไว้บน Google Maps

ช่วงที่ผ่านมามีเรื่องงี่เง่าเข้ามาในชีวิตจนไม่อยากทำอะไรเลย แต่ก็หาอะไรเล่นๆ แก้เบื่อหน่อย ก็ลองเอาข้อมูลจาก Google Spreadsheets (อยู่ในชุด Google Docs) มาใช้ร่วมกับ Google Maps โดยข้อมูลที่นำมาเล่นคือ ตำแหน่งและข้อมูลของโรงเรียนบางแห่งของอำเภอเมืองนครปฐมครับ (เกิดที่นี่ ก็เอาข้อมูลที่นี่แหละ) ซึ่งจะเห็นข้อมูลดังข้างล่างนี้ครับ



จากนั้นผมก็ดึงข้อมูลใน Google Spreadsheets ผ่านเว็บฟีด โดยดึงข้อมูลแต่ละแถวมาแสดงบนแผนที่ครับ ซึ่งจะแสดงได้ดังข้างล่างนี้ เมื่อลองคลิกไปที่ไอคอน จะมีการแสดงข้อมูลของโรงเรียนนั้นด้วย

สำหรับโค้ดที่ใช้นี้ สามารถนำไปทดลองได้นะครับ หากมีปัญหาอะไรก็บอกกันได้ครับ

var map;
// Google Spreadsheet key
var param_ssKey = "pbkykyr-0xO6c9qwiV24QWQ";
// Google Spreadsheet worksheet ID
var param_wsId = "od6";
// Starting point of the map
var startPoint = new GLatLng(13.819682014906682, 100.0600004196167);
var zoom = 14;
 
function init() {
  if (GBrowserIsCompatible()) {
    // create the Map object
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.disableDoubleClickZoom();
    map.enableScrollWheelZoom();
    map.setCenter(startPoint, zoom);
    // Retrieve the store location data from Google Spreadsheets
    getJSON();
  }
}
 
function getJSON() {
    var script = document.createElement('script');
    script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list' + '/' + param_ssKey + '/' + param_wsId + '/public/values' + '?alt=json-in-script&callback=loadJSON');
    script.setAttribute('id', 'jsonScript');
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
}
 
function loadJSON(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var func_entry = json.feed.entry[i];
        var func_name = (func_entry["gsx$name"].$t) ? func_entry["gsx$name"].$t : "";		
        var func_schoolName = "<b>โรงเรียน" + func_name + "</b>";
        var func_address = (func_entry["gsx$address"].$t) ? func_entry["gsx$address"].$t : "";
        var func_tumbol = (func_entry["gsx$tumbol"].$t) ? func_entry["gsx$tumbol"].$t : "";
        var func_amphoe = (func_entry["gsx$amphoe"].$t) ? func_entry["gsx$amphoe"].$t : "";
        var func_province = (func_entry["gsx$province"].$t) ? func_entry["gsx$province"].$t : "";
        var func_zipcode = (func_entry["gsx$zipcode"].$t) ? func_entry["gsx$zipcode"].$t : "";
        var func_telephone = (func_entry["gsx$telephone"].$t) ? " " + func_entry["gsx$telephone"].$t : "";
        var func_website = (func_entry["gsx$website"].$t) ? " " + func_entry["gsx$website"].$t : "";
        var func_lat = parseFloat(func_entry["gsx$lat"].$t);
        var func_lng = parseFloat(func_entry["gsx$lng"].$t);
        var func_point = new GLatLng(func_lat,func_lng);
 
        var func_html = "<div><b>" + func_schoolName + "</b><br/>";
        func_html += "<table><tr valign=\"top\"><td>ที่อยู่:</td><td>" + func_address + " ตำบล" + func_tumbol + "<br />อำเภอ" + func_amphoe + " จังหวัด" + func_province + " " + func_zipcode + "</td></tr>";
        func_html += "<tr valign=\"top\"><td>โทรศัพท์:</td><td>" + func_telephone + "</td></tr>";
        func_html += "<tr valign=\"top\"><td>เว็บไซต์:</td><td><a href=\"" + func_website + "\" target=\"_blank\">" + func_website + "</a></td></tr>";
        func_html += "</table></div>";
 
        createSchoolMarker(func_point, func_schoolName, func_html);
    }
}
 
function createSchoolMarker(point, schoolName, html) {
    var func_icon = new GIcon();
    func_icon.image = "images/education.gif";
    func_icon.iconSize = new GSize(30, 30);
    func_icon.shadowSize = new GSize(41, 30);
    func_icon.iconAnchor = new GPoint(6, 20);
    func_icon.infoWindowAnchor = new GPoint(5, 1);
    var func_markerOpts = {};
    func_markerOpts.icon = func_icon;
    func_markerOpts.title = schoolName;
    var func_marker = new GMarker(point, func_markerOpts);
    GEvent.addListener(func_marker, "click", function() {
        func_marker.openInfoWindowHtml(html, {maxWidth:400});
    });
    map.addOverlay(func_marker);
}
 
setTimeout('init()', 100);