Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps
จากคราวก่อนที่เราทดลองใช้ Google Maps API แสดงแผนที่ในหน้าเวปของเราไปแล้ว (อ่าน Tutorial แบบบ้านๆ ตอนที่ 1) คราวนี้มาต่อตอนที่ 2: เพิ่มและแสดงหมุดใน Google Maps กันครับ
ประโยชน์ของการใช้ Google Maps API แสดงแผนที่ก็คือเราสามารถแสดงหมุด จากข้อมูลใน database ของเราเองได้ คราวนี้เราจะทดลองสร้าง interface ให้ปักหมุด จัดค่าพิกัดใน database และนำข้อมูลจาก database กลับมาแสดงครับ
สิ่งที่ต้องเตรียมก่อนเริ่ม
- Database server สำหรับเก็บข้อมูลพิกัด (ผมใช้ MySQL v5.0)
- Web Server สำหรับประมวลผลและติดต่อ database จะใช้อะไรก็ตามสะดวกครับ (ผมเขียน server side ด้วย Rails ครับ ขอใช้ตัวอย่างเป็น Rails นะครับ)
ขั้นตอนที่ 1 มารู้จักวิธีการแสดงหมุดบนแผนที่ด้วย Google Maps API กันก่อน
หมุดที่แสดงบนแผนที่ Google Maps จะเรียกว่า Marker ครับ โดยการจะแสดงหมุดบนแผนที่นั้น ก็ต้องสร้าง Marker ขึ้นมาก่อน แล้วก็ทำการเพิ่ม Marker ที่สร้างมาลงบนแผนที่ ลองดูจาก script นะครับ
/*บรรทัด 2-3 เป็นการสร้างแผนที่และกำหนดจุดศูนย์กลางแผนที่ เหมือนในตอนที่ 1*/
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
/*บรรทัด 6-7 เป็นการสร้าง Marker โดยกำหนดตำแหน่งของ Marker ไว้ตำแหน่งเดียวกับศูนย์กลางแผนที่*/
var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point);
/*บรรทัด 10 เป็นการเพิ่ม marker ที่เพิ่งสร้างลงในแผนที่*/
map.addOverlay(marker);
ตัวอย่างของ script ข้างบน (view source กันเองนะครับ) เป็นไง ง่ายไหมครับ
ขั้นตอนที่ 2 สร้าง database สำหรับเก็บข้อมูลพิกัด
สร้าง table สำหรับเก็บข้อมูลพิกัด อย่างง่ายๆตาม SQL ข้างล่างครับ โดย field lat กับ lng เก็บทศนิยมแค่ 6 หลักก็พอครับ เนื่องจากถึงเก็บละเอียดกว่านี้ เรา็ก็คงสามารถสังเกตุไม่ออกแม้ว่าจะซูมแผนที่ใกล้ที่สุดแล้วก็ตาม ตัวอย่าง table และตัวอย่างข้อมูลต่อจากนี้ผมขออนุญาตนำมาจาก http://code.google.com/support/bin/answer.py?answer=87134&topic=11364 นะครับ
CREATE TABLE `markers` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 60 ) NOT NULL , `address` VARCHAR( 80 ) NOT NULL , `lat` FLOAT( 10, 6 ) NOT NULL , `lng` FLOAT( 10, 6 ) NOT NULL ) ENGINE = MYISAM ;
ขั้นตอนที่ 3 ใส่่ค่าเริ่มต้นใน database
ใส่ marker ลงใน database เพิ่มค่าเริ่มต้นซักหน่อย เดี๋ยวเราจะลองมาแสดงหมุดจาก database กัน
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Frankie Johnnie Luigo Too','939 W El Camino Real, Mountain View, CA','37.386339','-122.085823');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Amici\'s East Coast Pizzeria','790 Castro St, Mountain View, CA','37.38714','-122.083235');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Kapp\'s Pizza Bar Grill','191 Castro St, Mountain View, CA','37.393885','-122.078916');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Round Table Pizza: Mountain View','570 N Shoreline Blvd, Mountain View, CA','37.402653','-122.079354');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Sausage Factory Inc','517 Castro St, San Francisco, CA','37.389578','-122.081463');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Tony and Alba\'s Pizza & Pasta','619 Escuela Ave, Mountain View, CA','37.394011','-122.095528');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Oregano\'s Wood-Fired Pizza','4546 El Camino Real, Los Altos, CA','37.401724','-122.114646');
ขั้นตอนที่ 4 ทดลองนำค่าพิกัดจาก database มาแสดงในแผนที่
พอเสร็จขั้นตอนที่ 3 เราก็มี database ที่มีข้อมูลพิกัดแล้ว ตอนนี้เราจะมาแสดงพิกัดจาก database บนแผนที่กันครับ เริ่มต้นง่ายๆที่สุดก็คือทำเป็นแบบ static โดยโหลดค่าพิกัดทั้งหมดที่ต้องการแสดงเข้าไปกับหน้าเพจที่กำลังแสดงเลย แล้วใช้ javascript สร้าง Marker จากค่าพิกัดนั้นๆ แล้วก็ใส่ลงในแผนที่
ขั้นตอนนี้จะต้องเขียนโปรแกรมฝั่ง server side กันละครับ ว่ากันตามสะดวกนะครับใครถนัดภาษาอะไร ตัวอย่างข้างล่างเป็น Ruby on Rails
ส่วน controller query ค่าพิกัดจาก database
def show @markers = Marker.find(:all, :limit => 5) end
ส่วน view ไฟล์ show.html.erb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(markers[i]['marker']['lat'],markers[i]['marker']['lng']);
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
<script type="text/javascript">
//<![CDATA[
var markers = <%=@markers.to_json%> ;
//]]>
</script>
</body>
</html>
จุดสำคัญคือ ตรง var markers = <%=@markers.to_json%> เป็นส่วนที่นำค่าพิกัดที่ได้จาก database ส่งไปให้ function load() เพื่อนำไปสร้าง Marker และใส่ในแผนที่ โดย Rails จะ render ออกมาเป็น
var markers = [{"marker": {"lng": -122.083235, "lat": 37.38714}}, {"marker": {"lng": -122.078916, "lat": 37.393885}}, {"marker": {"lng": -122.085823, "lat": 37.386339}}, {"marker": {"lng": -122.079354, "lat": 37.402653 }}, {"marker": {"lng": -122.081463, "lat":37.389578 }}] ;
แล้วเราก็แกะค่าตัวแปล markers เพื่อเอา lat, lng ออกมาสร้าง Marker ครับ
var point = new GLatLng(markers[i]['marker']['lat'],markers[i]['marker']['lng']);
ไม่ยากใช่ไหมครับ แต่ว่าวิธีนี้มีปัญหาอยู่ตรงที่ ถ้าเรามี Marker จำนวนมากๆ เป็นร้อยเป็นพัน จะทำให้หน้า html ของเราใหญ่และโหลดช้า รวมถึงทำให้เปลือง memory ในการที่โหลด Marker จำนวนมากๆด้วยครับ วิธีแก้ก็คือทำการ load ค่าพิกัดและสร้างหมุดแบบ dynamic คือแสดงเพราะส่วนที่มองเห็นในแผนที่เท่านั้น แต่ว่าขอยกไปคราวหน้าละกันครับ
