หลังจากหายหน้าไปนาน ขอต่อเรื่อง Google Maps ด้วยการใช้รูปภาพแทนหมุดกันครับ ถ้าจะค้นหาบทความเพิ่มเติม ลองค้นคำว่า Custom Marker Icon นะครับ เรามาเริ่มเรื่องของเรากันเลยดีกว่า

สังเกตุไหมครับว่าจากตัวอย่างที่ผ่านๆมาทั้งหมด หมุดของเราเป็นหมุดแดงๆ แล้วมีจุดดำๆตรงกลาง ซึ่งเป็นมาตรฐานของ Google Maps เค้า บา่งทีมันอาจดูไม่เนียน ไม่เข้ากับเวปเราเท่าไหร่ สามารถเปลี่ยนได้นะครับ โดยใช้ Customer Marker Icon วิธีกา่รไม่ยากครับ ผมว่าที่ยากที่สุดก็ตรงทำรูป Icon ที่ดูดีอย่างที่ต้องการมากกว่า (ของ ddproperty.com ผมกับเพื่อน ก็ดูแบบจากหลายๆที่มารวมๆกัน ซึ่งทำนานกว่าเขียน script อีก)

การปรับ Options ของ Gmarker

ตามเอกสาร Google Maps API (Gmarker) ฟังชั่น Gmarker รับ parameter แบบนี้ครับ

โดยปกติถ้าเราระบุแค่ latlng เราก็จะได้ Marker ที่ตำแหน่งที่ต้องการโดย icon จะเป็น G_DEFAULT_ICON ซึ่งก็คือ หมุดแดงที่มีจุดดำครับ

ถ้าเราต้องการเปลี่ยนหมุดให้เป็นรูปสวยงาม (??) ตามต้องการเราก็ต้องระบุ options (GMarkerOptions) ซึ่งมีตัวเลือกให้เยอะมากครับและก็มีเพิ่มขึ้นเรื่อยๆเมื่อมีการ update Google Maps API ที่เราสนใจในตอนนี้คือ options ชื่อ icon ครับ โดยเราต้องสร้าง GIcon (การใช้งาน GIcon) ขึ้นมาแล้วนำไปใช้

ใครถนัดอ่านภาษาอังกฤษผมแนะนำให้อ่าน Making your own custom markers ของคุณ Mike Williams ผมว่าเขียนไว้ได้ครบถ้วนดีครับ ผมจะพยายามแปลให้เข้าใจง่ายๆดูนะครับ ย้ำว่าส่วนต่อจากนี้ผมแปลบทความของคุณ Mike เป็นหลัก ผสมกับการอธิบายของผมตามที่ติดว่าจะเข้าใจง่ายขึ้นครับ

var Icon = new GIcon();
Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);
Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = "mytran.png";
Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];
Icon.printImage = "mymarkerie.gif";
Icon.mozPrintImage = "mymarkerff.gif";
Icon.printShadow = "myshadow.gif";

script ข้างบนเป็นการสร้าง GIcon เพื่อนำไปใช้สำหรับ options ในการสร้าง GMarker อีกทีนึง ที่เห็นยาวเหยียดจริงๆไม่ได้จำเป็นหมดทุกคำสั่งหรอกนะครับ แต่ว่าอันนี้เป็น parameter ที่มีเกือบทั้งหมดแล้ว ลองมาทำความเข้าใจไปทีละส่วนด้วยกันนะครับ

1. เริ่มสร้าง GIcon อันนี้ตรงไปตรงมาไม่มีอะไร

var Icon = new GIcon();

2. ต่อมาก็เริ่ม กำหนดรูปภาพที่ต้องการนำมาใช้เป็นรูปหมุด และบอกขนาดของรูปที่นำมาใช้ (กว้่าง x สูง)

ตรงนี้ต้องระวังเรื่อง path ของรูป ต้องให้ script สามารถมองเห็นรูปได้ไม่งั้นไม่ work และต้องกำหนด iconSize ถ้าไม่กำหนดจะไม่แสดง icon นะครับ การกำหนดขนาดของ icon กำหนดเป็น GSize นะครับ

Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);

3. ถ้าใครต้องการทำเงาให้หมุดด้วยก็ต้องกำหนดรูปเงาและขนาดของเงาดังนี้ครับ (เป็น options ไม่ต้องมีก็ได้ครับ)

Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);

4. ต่อไปเป็นการกำหนดจุดอ้างอิงของหมุด ซึ่งมี 2 จุด (รูปนิ้วประกอบนำมาจากเวปคุณ Mike Williams นะครับ)

• iconAnchor คือตรงปลายแหลมของหมุดที่จะปักลงบนแผน (จุดสีแดงในตัวอย่าง) ถ้ากำหนดผิดจุดเวลาแสดงผลมันจะดูหลอกๆ เพราะตรงปลายแหลมไม่ใช้จุดที่ปักลงแผนที่
• infoWindowAnchor คือตำแหน่งที่จะให้ infoWindow จะโผล่ออกจากหมุด (จะให้ตรงปลายแหลมของ infoWindows โผล่ออกมาจากตรงไหนของหมุด) ถ้ากำหนดผิดจะทำให้เวลาแสดง infoWindow มันจะดูไม่เนียน เช่นห่างหมุดมากไป หรือทะลุออกมาจากกลางหมุด โดยปกติเราจะอยากให้ infoWindow ออกมาจากด้านบนของหมุด (จุดสีเขียวในตัวอย่าง)

การกำหนดจุดอ้างอิงทั้งสองทำได้โดย

Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);

ให้สังเกตุว่าการนับตำแหน่งของจุดเริ่มจาก (1,1) ตรงมุมบนซ้ายของรูปหมุดของเรา และก็ใช้ GPoint ในการกำหนดจุดครับ

5. การป้องกันปัญหา การกดบนหมุดไม่ได้ (กดแล้วไม่เกิด event onClick) เวลามี infoWindow อยู่ใกล้ๆ

Icon.transparent = "mytran.png";
Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];

• transparent เป็นรูปภาพโปล่งใสของรูปหมุดของเรา (ดูวิธีการสร้างตอนท้าย) กำหนดเพื่อป้องกันการกดหมุดไม่ได้ใน Internet Explorer
• imageMap กำหนดเพื่อป้องกันการกดหมุดไม่ได้ใน Firefox ชุดตัวเลขที่เห็นเป็นพิกัด x,y บนรูปหมุดของเรา เช่น 9,0 หมายถึงจุด x=9, y=0 ไล่ไปเรื่อยๆ ซุ่มๆกำหนดให้ทั่วๆหมุดลองเรา (ผมเองไม่ได้กำหนดตัวนี้เพราะว่างงเหมือนกัน ใครเข้าใจบอกด้วยครับ )

6. ส่วนสุดท้ายเป็นการเตรียมตัวสำหรับการพิมพ์ (options ใครไม่เน้นเรื่องพิมพ์ไม่ต้องกำหนดครับ)

Icon.printImage = “mymarkerie.gif”;
Icon.mozPrintImage = “mymarkerff.gif”;
Icon.printShadow = “myshadow.gif”;

เนื่องจาก browser ส่วนใหญ่ไม่สนับสนุนการพิมพ์รูปภาพแบบที่โปร่งใสบางส่วน Google Maps API เลยอนุญาติให้กำหนดรูปแทนได้เวลาจะพิมพ์

• printImage เป็นรูปแทนของหมุดสำหรับ Internet Explorer
• mozPrintImage เป็นรูปแทนของหมุดสำหรับ Firefox
• printShadow เป็นรูปแทนของเงา

ถ้าไม่กำหนดค่า printImage และ mozPrintImage IE6 จะพิมพ์รูปหมุดหลักที่เรากำหนดไว้ก่อนหน้า (ซึ่งส่วนที่โปร่งใสจะออกมาทึบๆ) แต่ Firefox จะไม่พิมพ์หมุดเลยครับ

7. สุดท้าย พอเราสร้าง GIcon ใหม่เรียบร้อยแล้ว เราก็ต้องนำไปใช้ในการสร้างหมุด (GMarker) แบบนี้ครับ

var marker = new GMaker(latlng, {icon: Icon});

ลองดู ตัวอย่างการใช้รูปภาพแทนหมุด ที่เราทำข้างบนนะครับ

แถม 1: การสร้างเงาสำหรับหมุด

การสร้างเงา เริ่มแรกก็ใช้โปรแกรมจำพวก Photoshop เปิดรูปหมุดของเราขึ้นมาครับ แล้วก็เปลี่ยนสีของหมุดทั้งหมดให้เป็นสีดำไปเลย จากนั้นก็ปรับ opacity ลงซัก 50% หมุดดำของเราก็จะออกเป็นสีเทาๆ จากนั้นก็เอียงหมุด (Edit -> Transform -> Skew) ประมาณ 45% แล้วก็ทำพวก blur พองาม จากนั้นก็ Save for web เป็น PNG-24 เท่านี้ก็เรียบร้อยครับ

แถม 2: การสร้างภาพโปร่งใส (transparent) ของหมุด

การทำภาพโปร่งใสง่ายมากครับ แค่เปิดรูปหมุดในโปรแกรม Photoshop แล้วก็ลด opacity ลงเหลือ 1% เราจะมองไม่เห็นหมุดเลยครับ จากนั้นก็ Save for web เป็น PNG-24 เท่านี้ก็เรียบร้อยครับ

ทดลองทำกันดูนะครับ ทำเรียบร้อยแล้วก็ลองเอามาโชว์กันบ้างนะครับ ใครมีคำถามหรือว่าอยากแนะนำอะไร comment คุยกันได้นะครับ

ในเวป ddproperty.com ที่ผมกับเพื่อนดูแลอยู่เนี้ย เราให้คนที่ลงประกาศทุกคนต้องระบุตำแหน่งด้วยว่า อสังหาฯที่กำลังลงประกาศตำแหน่งอยู่ตรงไหน ผมก็ใ้ช้ google maps นี้แหละครับในการระบุตำแหน่ง

คราวนี้เราจะมาดูกันว่า จะใช้ Google Maps เพิ่มตำแหน่งหมุดใน Database ยังไง จริงๆแล้ว trick หลักๆก็คือว่าเราจะเอาค่าตำแหน่ง lat, lng ของจุดที่เราต้องการออกมาจาก Google Maps ได้ยังไง ส่วนการบันทึกค่าลง database ก็ทำเหมือนกับการส่งค่าจาก form ตามปกติ ขั้นตอนคร่าวๆเป็นแบบนี้ครับ

1. หาค่า lat, lng จากตำแหน่งที่ click บนแผนที่
2. เขียนค่า lat, lng ไว้ใน hidden fields ของ form ที่เราจะใช้ส่งค่ากลับไปฝั่ง server
3. ทางฝั่ง server ก็รับกา่ร submit แล้วก็เขียนค่าลง database

ง่ายไหมครับ ลองมาดูกันทีละขั้น

ขั้นแรก หาค่า lat, lng จากตำแหน่งที่ click บนแผนที่

Google Maps API มี function ต่างๆที่เตรียมไว้ให้ใช้งานเยอะมากครับ รวมถึงเมื่อผู้ใช้ Interactive กับแผนที่เช่น Click บนแผนที่ ซูมเข้า ซูมออก หรือว่าจะขยับหมุดก็มี Event เกี่ยวข้องทั้งหมด สิ่งที่เราต้องทำเพื่อหาตำแหน่งที่ผู้ใช้งาน Click บนแผนที่ก็คือสร้าง Listerner เพื่อมาดักจับ Event เหล่านี้ ซึ่งทำได้อย่างนี้ครับ

 GEvent.addListener(map, "click", function(overlay, latlng) { /*เรา check ค่า overlay เพื่อดูว่าเป็นการกดบนแผนที่ หรือว่ากดบน overlay ที่อยู่บนแผนที่เช่น marker โดยตัวแปล overlay จะมีค่าเป็น null ในกรณีที่กดบนแผนที่เปล่าๆ*/ if (!overlay) { var lat = latlng.lat(); var lng = latlng.lng(); } }); 

โดย Event “click” เนี้ยจะส่งค่าตัวแปลไปให้ function ที่เราเขียนขึ้นมารับด้วย คือ overlay และ latlng โดย overlay จะเป็นตัวบอกว่าเป็นการ click บนแผนที่ หรือว่า click บน overlay ส่วน latlng จะเป็นตัวแปลประเภท GLatLng ซึ่งมี method lat(), lng() เพื่อหาค่า lat, lng แค่นี้เราก็จะได้ค่า lat, lng ของตำแหน่งที่ click บนแผนที่แล้วครับ

เขียนค่า lat, lng ไว้ใน hidden fields ของ form ที่เราจะใช้ส่งค่ากลับไปฝั่ง server

อันนี้ก็ตรงไปตรงมาครับ โดยเราจะำสร้าง form ที่มี hidden fields ชื่อ lat กับ lng ไว้ แล้วทำการ update ค่าทุกครั้งที่มีกาีร click บนแผนที่

</p> <form action=&quot;/new_marker&quot;> <p><input name=&quot;marker[name]&quot; size=&quot;30&quot;/> <input name=&quot;marker[address]&quot; size=&quot;30&quot;/> <input type=&quot;hidden&quot; id=&quot;marker_lat&quot; name=&quot;marker[lat]&quot;/> <input type=&quot;hidden&quot; id=&quot;marker_lng&quot; name=&quot;marker[lng]&quot;/> <input type=&quot;submit&quot; name=&quot;commit&quot; value=&quot;submit&quot;/></p> </form> <p>

แล้วก็จัดกา่รแก้ไข javascript ของเราให้ Update value ของ hidden fields lat, lng สังเกตุว่า ผมใช้ $(‘marker_lat’) แทนการ getElementById เพราะผมใช้ Prototype Framework อันนี้เพราะผมชินครับ ส่วนใครจะใช้ javascript แบบมาตราฐานก็ตามสะดวกครับ

 var map; var present = null; function updateHiddenFields(marker) { latlng = marker.getLatLng(); var lng = latlng.lng(); var lat = latlng.lat(); $('marker_lat').value = lat; $('marker_lng').value = lng; } function addMarker(latlng) { if (!present) { /*ใส่ options draggable เป็น true เพื่อให้สามารถย้ายตำแหน่งของหมุดได้ ส่วน bouncy เป็น false เพื่อไม่ให้หมุดเด้งหลังการย้ายตำแหน่ง*/ var newMarker = new GMarker(latlng, { draggable: true, bouncy: false}); map.addOverlay(newMarker); /*ตรวจจับ Event dragend เพื่อทำการ update ค่า lat,lng เมื่อมีย้ายหมุด*/ GEvent.addListener(newMarker, "dragend", function() { updateHiddenFields(newMarker); }); updateHiddenFields(newMarker); map.panTo(latlng); present = true; } } function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function(overlay, latlng) { if (!overlay) { addMarker(latlng); } }); } } 

เนื่องจากผมต้องการให้ระบุตำแหน่งทีละหนึ่งอัน (หนึ่งอสังหาฯ หนึ่งตำแหน่ง) เลยต้องมีตั้งค่าตัวแปล present เอาไว้ check ไม่ให้เพิ่มหมุดซ้ำ

ทางฝั่ง server รับกา่ร submit แล้วก็เขียนค่าลง database

ที่นี้ก็จัดกา่ร insert ค่าที่ได้รับจาก form ลง database ครับ

 def new_marker _marker = params[:marker] @marker = Marker.new(_marker) @marker.save! end 

เท่านี้ก็เป็นอันเรียบร้อยครับ ลองดูตัวอย่าง ลองดู Firebug console นะครับว่า ค่า value ของ hiddle fields เปลี่ยนหลังจากย้ายหมุดตามที่ต้องการหรือเปล่า

Del.icio.us : Google Map, tutorial
Technorati : Google Map, tutorial

ความเดิมจากตอนที่แล้ว เราพูดถึงวิธีิการแสดงหมุดจาก database บนแผนที่ Google Maps ไปแล้ว แต่ติดตรงที่ว่าเวลามีหมุดเยอะๆจะแสดงหน้าเวปช้า และเปลือง memory คราวนี้ผมจะพูดถึงการใช้วิธีการแสดงหมุดจาก database เฉพาะส่วนที่มองเห็นในหน้าต่างแผนที่โดยการใช้ AJAX ครับ

ส่วน table database และ ข้อมูลใน database ก็ใช้ของคราวที่แล้วครับ (ดูได้ที่ Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps)

สิ่งที่ต้องเตรียมก่อนเริ่ม

1. ผมใช้ Prototype Javascript Framework สำหรับทำ AJAX เพราะมันติดมากับ Rails เลยชินครับ ถ้าใครถนัดตัวอื่นก็ตามสะดวก
2. แนะนำ Firefox + Firebug สำหรับการ Debug ครับ สุดยอดมากๆ

หลักกาำรทำงาน

1. ทุกครั้งที่มีกา่รเลื่อนแผนที่ หรือซูมเข้า/ซูมออก script จะขอข้อมูลจาก server และนำไปแสดงจุดพิกัดใหม่ในแผนที่
2. ใช้พิกัดของแผนที่ ที่กำลังแสดงผล (x1,y1,x2,y2 ตรงมุมกรอบของแผนที่) เป็นตัวแปลในการเลือกข้อมูลพิกัดจาก database

อ้อ วิธีการที่จะเขียนถึง ส่วนใหญ่นำมาจากหนังสือ “Beginning Google Maps Applications with Rails and Ajax” นะครับ ลองไปหาอ่านดูกัน แนะนำๆ

ส่วนที่ 1 เรียกใช้ prototype.js โดยการเพิ่มบรรทัดต่อไปนี้ ในส่วน head

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>

ส่วนที่ 2 แก้ไขส่วน Javascript โดยเพิ่ม function สำหรับแสดงหมุด และ แก้ไข function load() ดังนี้ครับ

var displayingMarkers = [];
var displayingMarkersNum = 0;
var deletingMarkers = [];
var deletingMarkersNum = 0;

function clearMarkers() {

for (var i = 0 ; i < deletingMarkersNum ; i++) {
map.removeOverlay(deletingMarkers[i]);
}

}

function updateMarkers() {
//เตรียม parameters พิกัดของแผนที่ที่กำลังแสดง เพื่อ query หมุดจาก database
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var mapBoundary = 'ne=' + northEast.toUrlValue() + '&amp;amp;amp;sw=' + southWest.toUrlValue();
var myAjax = new Ajax.Request( '/get_marker', {
method: 'get',
parameters: mapBoundary,
onComplete: function(request){
// function นี้จะทำงานหลังจากได้รับค่า response จาก server
// ทำการเก็บค่า response จาก server เข้าตัวแปล markers
markers = eval( "(" + request.responseText + ")" );

// copy markers ที่กำลังแสดงอยู่เก็บไว้ เดี๋ยวเราจะลบหมุดพวกนี้ออก หลังจากเพิ่มหมุดชุดใหม่ในแผนที่แล้ว
deletingMarkers = displayingMarkers.clone();
deletingMarkersNum = displayingMarkersNum;
displayingMarkersNum = 0;
displayingMarkers.clear();

for (var i = 0 ; i < markers.length ; i++) {
var marker = markers[i]
var lat = marker.lat;
var lng = marker.lng;

//check for lat and lng so MSIE does not error on parseFloat of a null value
if (lat &amp;amp;amp;&amp;amp;amp; lng &amp;amp;amp;&amp;amp;amp; lat != 0 &amp;amp;amp;&amp;amp;amp; lng != 0) {
var latlng = new GLatLng(lat,lng)

var marker = new GMarker(latlng);

displayingMarkers[displayingMarkersNum] = marker;
displayingMarkersNum++;

map.addOverlay(marker);

} // end of if lat and lng
} // end of for loop

clearMarkers();

} // end of anonymous onComplete function

}); // end of the new Ajax.Request() call

}

function load() {
if (GBrowserIsCompatible()) {
displayingLandmarkNum = 0;
displayingLandmark.clear();
deletingLandmarkNum = 0;
deletingLandmark.clear();

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

updateMarkers();
GEvent.addListener(map,'zoomend',function() {
updateMarkers();
});

GEvent.addListener(map,'moveend',function() {
updateMarkers();
});
}
}

ส่วนที่ 3 เพิ่ม action ฝั่ง server ให้รับ AJAX request และ return ค่าพิกัด

def get_marker
ne = params[:ne].split(',').collect{|e|e.to_f}
sw = params[:sw].split(',').collect{|e|e.to_f}

# if the NE longitude is less than the SW longitude,
# it means we are split over the meridian.

if ne[1] > sw[1]
conditions = '((lng > ? AND lng < ?) AND (lat <= ? AND lat >= ?))'
else
conditions = '((lng >= ? OR lng < ?) AND (lat <= ? AND lat >= ?))'
end
markers = Marker.find :all, :select => 'id, lat, lng', :conditions => [conditions,sw[1],ne[1],ne[0],sw[0]]

render :text=>markers.collect{|c|c.attributes}.to_json
end

TIPS:

ลองสังเกตุหน้าต่าง console ของ Firebug เวลาเลื่อนแผนที่ดูครับ จะเห็นการสื่อสารระหว่าง browser กับ server เพิ่มขอข้อมูลพิกัดทุกครั้งที่มีการเลื่อนแผนที่

จากคราวก่อนที่เราทดลองใช้ Google Maps API แสดงแผนที่ในหน้าเวปของเราไปแล้ว (อ่าน Tutorial แบบบ้านๆ ตอนที่ 1) คราวนี้มาต่อตอนที่ 2: เพิ่มและแสดงหมุดใน Google Maps กันครับ

ประโยชน์ของการใช้ Google Maps API แสดงแผนที่ก็คือเราสามารถแสดงหมุด จากข้อมูลใน database ของเราเองได้ คราวนี้เราจะทดลองสร้าง interface ให้ปักหมุด จัดค่าพิกัดใน database และนำข้อมูลจาก database กลับมาแสดงครับ

สิ่งที่ต้องเตรียมก่อนเริ่ม

1. Database server สำหรับเก็บข้อมูลพิกัด (ผมใช้ MySQL v5.0)
2. 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;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 คือแสดงเพราะส่วนที่มองเห็นในแผนที่เท่านั้น แต่ว่าขอยกไปคราวหน้าละกันครับ

ตอนผมทำเวป ddproperty.com อยากจะเอา Google Maps มาใช้ระบุตำแหน่ง ก็เลยหาข้อมูลจากหลายๆที่ ทั้งดูตัวอย่างจากเวป แล้วก็หาอ่านจาก เอกสารของ google และ Google Maps Tutorial รวมถึงเอกสาร การใช้ Google Maps API ที่ รองศาสตราจารย์สวัสดิ์ชัย เกรียงไกรเพชร รวบรวมไว้ซึ่งละเอียดมากๆ ถ้าใครต้องการเนื้อหาแบบละเอียดๆ ก็ลองอ่านดูได้จาก link ข้างต้นไม่ผิดหวังครับ

แต่ที่ผมจะเขียนนี้ขอเป็น Google Maps Tutorial แบบบ้านๆ รวบรวมเฉพาะส่วนที่ผมใช้เป็นหลักในเวป ddproperty.com โดยจะแบ่งเป็นตอนๆแบบนี้ครับ

1. Basic Google Maps API
2. แสดงหมุดจาก database ใน Google Maps
3. แสดงหมุดจาก database ใน Google Maps ด้วย AJAX
4. เพิ่มหมุดใน database
5. ใช้รูปภาพแทนหมุด (Custom Marker Icon)
6. การทำ Custom marker icon สำหรับ Google Static Maps
7. ใช้รูปภาพแทนปุม control (Custom Control)
8. สร้าง info windows แบบลอยนอกแผนที่
9. แล้วแต่จะคิดออกต่อๆำไปครับ

ออกตัวเสร็จแล้วก็เริ่มตอนที่ 1 กันดีกว่า

ในการจะนำ Google Maps มาใส่ในเวปของเราเนี้ยจริงๆแล้วมันมีได้ 2 แบบคือ

• แบบที่ใช้บริการจำพวก My maps ของ Google แบบนี้ใช้งานง่ายมากแค่แปะ link ในหน้า source code ของเวปก็แสดงแผนที่ได้แล้ว (แนะนำหนังสือ Google Maps มหัศจรรย์แผนที่ออนไลน์ ครับ) แต่ว่ามีข้อจำกัดในการทำลูกเล่นต่างๆและ ไม่สามารถแสดงข้อมูลที่อยู่ใน database ของเราเองได้
• กับแบบที่แสดงแผนที่โดยใช้ Google Maps API จะสามารถปรับหน้าตาแผนที่ได้ และจะสามารถแสดงหมุดจาก database ของเราเอง หรือเพิ่มหมุดลงใน database ก็ได้ครับ

ที่ผมกำลังจะเขียนถึงเป็นแบบที่สอง คือ Google Maps API ครับ

ขั้นตอนที่ 1: ขอใช้ API Key สำหรับใช้งาน Google Maps

ขั้นแรกก็ต้องขอ API Key จาก Google ก่อนครับ โดยทำได้ง่ายมากๆ แค่มี account ของ google (ก็ account gmail นั้นแหละครับ) ก็เป็นอันใช้ได้ โดยไปที่ http://www.google.com/apis/maps/signup.html พออ่าน Term of Service จบแล้ว ก็ใส่ domain name ของเวปเรา ที่จะใช้ Google Maps API ในกล่้อง My web site ตามรูปครับ

เช่นถ้าจะใช้ Google Maps API กับเวป ddproperty.com ก็ใส่ http://www.ddproperty.com ลงไปจะทำให้สามารถใช้ Google Maps API กับทุกๆหน้าภายใตั domain www.ddproperty.com ได้ (sub domain ไม่ได้นะครับ ต้องขอ API key อันใหม่)

ในช่วง development ที่ยังไม่ได้จด domain ก็ใส่ http://localhost/ ไปได้เลยครับ แล้วก็เข้าหน้าทดสอบผ่านทาง url localhost เอา

สามารถขอได้หมายๆอันนะครับ ไม่ต้องกลัวหมด ผมขอมาทดลองหลายอันแล้ว

ขั้นตอนที่ 2: แปะ script สำหรับ Google Maps API และเรียกใช้งาน

พอกด Generate API Key ในขั้นแรกแล้วก็จะได้ API Key มา พร้อมด้วยตัวอย่างการนำไปใช้ในเวปของเราตามรูปข่างล่าง

จริงๆแล้วเจ้า Google Maps API เนี้ยมันก็คือ javascript functions ชุดนึงที่ Google เขียนขึ้นเพื่อให้เราเรียกใช้เพื่อสร้างแผนที่ในเวปเรา จากตัวอย่างที่ได้มาจากการสร้าง API Key จะเห็นได้ว่าการเรียกใช้งาน Google Maps API เนี้ยแบ่งเป็น 4 ส่วนใหญ่ๆครับ

1. การ include Google Maps API (external javascript จาก google) เข้ามาในหน้าเวปเรา ตาม script ข้างล่างโดย v=2 หมายถึง API version 2 ซึ่งเป็นเวอร์ชั่นหลักในปัจจุบัน และ key=api_key ก็คือค่า API Key ของเราถ้าพัฒนาเสร็จแล้วก็ไปขอ API Key ใหม่โดยใช้ domain name ของจริงแล้วก็นำมาแทนที่ตรงนี้ครับ

<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQKXEKxoc7nW6rPe_Qv-bqip6q6Kw" type="text/javascript"></script>

2. เขียน javascript เพื่อเรียกใช้งาน Google Maps API จาก script จะเห็นการเรียก function GBrowserIsCompatible() เพื่อเป็นการตรวจสอบว่า browser รองรับหรือเปล่าก่อนจะสร้าง object map อันนี้เป็น pattern ในการเริ่มสร้าง map เลยครับ ที่อยากให้สังเกตุอีกอันนึงคือ GMap2(document.getElementById(“map”)); parameter ที่ใช้ในการสร้าง object GMap2 เป็นชื่อของ DIV Element ที่จะให้ google ใช้เป็นพื้นที่ของแผนที่

<script type="text/javascript">// <![CDATA[

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

// ]]></script>

3. ต่อไปก็เป็นส่วนเรียกใช้ function load() ที่เขียนเอาไว้ โดยจากตัวอย่างของ Google เค้าเขียนง่ายๆ โดยการผูกกับ Event onload ของ Page body ส่วน GUnload() ที่ผูกไว้กับ Event onunload เป็น function ของ Google Maps ครับ เอาไว้ release memory ป้องกันพวก memory leak ประมาณนั้น ใส่ไว้กันเหนียว
4. จาก script ในข้อ 3 อยากให้สังเกตุ DIV Element ที่มี id=”map” ครับ พื้นที่ตรงนี้แหละครับที่จะถูกแสดงแผนที่ ตามที่เรากำหนดไว้ใน function load() ในส่วนที่ 2 เราสามารถกำหนดขนาดเล็กใหญ่ของแผนที่ได้ โดยกำหนด style ให้กับ DIV Element อันนี้ครับ

เท่านี้ก็เป็นอันเสร็จการเพิ่มแผนที่ Google Maps เข้าไปในเวปของเราแล้วครับ ลองดูผลงานจากตัวอย่าง เขียนไปเขียนมาทำไมมันยาวจัง แล้วตอนต่อไปมันจะยาวขนาดไหนเนี้ย

ผมเขียนแล้วอ่านรู้เรื่องไหมครับ แนะนำและแสดงความคิดเห็นใน comment นะครับ แล้วจะนำไปปรับปรุงสำหรับตอนต่อๆไปครับ