Ruby on Railsを使用して緯度と経度のマーカーをmysqlデータベースに保存する方法

Question

ruby​​ on rails 3.1でgoogle maps api v3を使用します。ビジネスの私のショーのビューの

class Business < ActiveRecord::Base 
    attr_accessible :business_name, :address, :city_id, 
        :latitude, :longitude, :zipcode 

一部はここにある：私は、次のモデルを持っている

%style{:type => "text/css"} 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 

%script{:type => "text/javascript", 
     :src => "http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false"} 

%script{:type => "text/javascript"} 
    function initialize() { 

    var latlng = new google.maps.LatLng(#{@business.latitude}, #{@business.longitude}); 

    var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var contentString = "#{@business.business_name}" 

    var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
    }); 


    var marker = new google.maps.Marker({ 
    position: latlng, 
    draggable:true, 
    animation: google.maps.Animation.DROP, 
    title:"#{@business.business_name}" 
    }); 

    // To add the marker to the map, call setMap(); 
    marker.setMap(map); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
    var latitude = marker.getPosition().lat(); 
    var longitude = marker.getPosition().lng(); 
    // use Ajax to save latitude, longitude in the database 
} 


    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

%div#map_canvas{:style => "width:500px; height:350px"} 

私はドラッグ＆マーカーをドロップしますが、私はまだ内の新しい位置を保存することはできませんデータベース（mysql 2.8.1）。私はいくつかのjavascriptを見つけました（var latitude = marker.getPosition（）。lat（）;）の行を見ましたが、javascriptの知識が非常に貧弱なので、データベースに新しいマーカー位置を保存する方法がわかりません。理想的には、新しい緯度と経度をデータベースに保存することを確認する情報ウィンドウに「保存」リンクが必要です。

誰でもこの方法を知っていますか？ご協力いただきありがとうございます！

Answer 1

あなたはAjaxのフォームにデータを転送clould：あなたのjsの中

<%= form_for @marker, :remote => true, :html => { :multipart => true } do |f| %> 
    <%= f.hidden_field :lat, :id => "lat" %> 
    <%= f.hidden_field :lng, :id => "lng" %> 
    <%= f.submit "save marker" %> 
<% end %> 

追加：

var lat = $("#lat"); 
var lng = $("#lng"); 

var set_latlng_to_input = function(marker){ 
    lat.val(marker.getPosition().lat()); 
    lng.val(marker.getPosition().lng()); 
} 

あなたが今、あなたのgoogle.maps.event.addListenerに呼び出す必要があり、この機能：

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    set_latlng_to_input(marker); 
}); 

google.maps.event.addListener(marker, 'dragend', function() { 
    set_latlng_to_input(marker); 
}