How to use ym4r drag and move marker in google map

Esa's Google Maps API examples
Integrating Google Maps into Your Web Applications
google map api
[Ym4r-user] marker event listeners
A port of the YM4R-GM plugin for rails

If we want to drag or move a marker, we should set the global variable for marker when we create a marker or this marker would be anonymous one
<br /> def show<br /> @store = Store.find(params[:id])<br /> lat = @store.lat<br /> lng = @store.lng<br /> <br /> @map = GMap.new("map_div_id")<br /> @map.control_init(:small_map => true)<br /> @map.center_zoom_init([lat,lng], 16)<br /> @gmarker = GMarker.new([lat, lng], :info_window => "#{@store.name} #{@store.info}", :draggable => true)<br /> <br /> #就是要它, 沒有它, 上面生出來的@gmarker 會是anonymous 的, 所以你也沒法拿到該marker 進而移動它或拖拉它了<br /> @map.overlay_global_init(@gmarker, "gmarker")<br /> @map.overlay_init(@gmarker)<br /><br /> #click 是在地圖, 所以是榜在地圖上<br /> @map.event_init(@map, "click", "clickStoreLocation")<br /><br /> #drag 是在marker, 所以是榜在marker 上<br /> @map.event_init(@gmarker, "dragend", "dragStoreLocation") <br /> end<br />

application.js
<br />//click 叫的<br />function clickStoreLocation(overlay, point){<br /> if (point) {<br /> var px = point.x;<br /> var py = point.y;<br /> $('#store_lng').attr('value', px);<br /> $('#store_lat').attr('value', py);<br /> <br /> //移動marker, 注意是要給GLatLng object<br /> gmarker.setLatLng(new GLatLng(py, px));<br /> } <br />} <br /><br />//拖拉時叫的<br />function dragStoreLocation(){<br /> //可以get 到marker 所在的經緯<br /> var latlng = gmarker.getLatLng().toUrlValue();<br /> var tmp = latlng.split(',');<br /> var px = tmp[1];<br /> var py = tmp[0];<br /> $('#store_lng').attr('value', px);<br /> $('#store_lat').attr('value', py);<br />}<br />

這樣會生出這樣的script
<br />//就是這個光, 沒有上面@map.overlay_global_init(@gmarker, "gmarker") 這句, 它就不會給它變數<br />//也就沒法接著 拖拉或者是移動這個 marker<br />var gmarker = addInfoWindowToMarker(new GMarker(new GLatLng(25.05592,121.518638),{draggable : true}),"GoYou R",{});<br />var map;<br />window.onload = addCodeToFunction(window.onload,function() {<br /> if (GBrowserIsCompatible()) {<br /> map = new GMap2(document.getElementById("map_div_id"));<br /> map.setCenter(new GLatLng(25.05592,121.518638),16);map.addOverlay(gmarker);<br /> map.addOverlay(gmarker);<br /> GEvent.addListener(map,"click",clickStoreLocation);<br /> GEvent.addListener(gmarker,"dragend",dragStoreLocation);<br /> map.addControl(new GSmallMapControl());<br /> }<br />});<br />

下面就是如果沒有@map.overlay_global_init(@gmarker, "gmarker"), 沒有給marker 指定變數的結果
<br />var map;<br />window.onload = addCodeToFunction(window.onload,function() {<br /> if (GBrowserIsCompatible()) {<br /> map = new GMap2(document.getElementById("map_div_id"));<br /> map.setCenter(new GLatLng(25.05592,121.518638),16);<br /> map.addOverlay(addInfoWindowToMarker(new GMarker(new GLatLng(25.05592,121.518638),{draggable : true}),"GoYou R",{}));<br /> GEvent.addListener(map,"click",clickStoreLocation);<br /><br /> //沒有幫marker 指定變數, 便會在我們想要幫它bind listener 的時候, 還會產生一個新的anonymous marker 也就沒法達到針對該marker 去drag 的 event<br /> GEvent.addListener(addInfoWindowToMarker(new GMarker(new GLatLng(25.05592,121.518638),{draggable : true}),"GoYou R",{}),"dragend",dragStoreLocation);<br /> map.addControl(new GSmallMapControl());<br /> }<br />});<br />