เพิ่มหมุดจาก Google Maps ลง Database

ในเวป 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