ช่วงที่ผ่านมามีเรื่องงี่เง่าเข้ามาในชีวิตจนไม่อยากทำอะไรเลย แต่ก็หาอะไรเล่นๆ แก้เบื่อหน่อย ก็ลองเอาข้อมูลจาก 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);


