如何使用Ruby on Rails将经度和纬度标记保存到mysql数据库中

Question

I use google maps api v3 with Ruby on rails 3.1. I have the following model:

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

Part of my show view of the business is here:

%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"}

I can drag and drop a marker, but I still can't save the new position in the database (mysql 2.8.1). I found some javascript (see lines around var latitude = marker.getPosition().lat();), but since my javascript knowledge is very poor I have no idea how to save the new marker position in the database. Ideally I would like to have a "save" link in my Info Window which would confirm the storage of the new latitude and longitude into the database.

Does anybody know how to do this? Thanks a lot in advance for your help!

Answer 1

You clould transfer the data to an ajax form:

<%= 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 %>

in your js add:

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

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

this function you now have to call in your 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);
 }