How to use jquery-addresspicker jquery with rails 3.1

问题

I am trying to use jquery-addresspicker with rails 3.1 but I am not able to make it run.

Here is the link https://github.com/sgruhier/jquery-addresspicker and the documentation does not mention much.

Can anyone suggest how should I use it in my rails app?

回答1:

did you include google maps

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

and jquery-ui ?

回答2:

place the script code in the html, or in separate js file

<script>
        $(function() {
            var addresspicker = $( "#addresspicker" ).addresspicker();
            var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
                regionBias: "fr",
              elements: {
                map:      "#map",
                lat:      "#lat",
                lng:      "#lng",
                locality: '#locality',
                country:  '#country'
              }
            });
            var gmarker = addresspickerMap.addresspicker( "marker");
            gmarker.setVisible(true);
            addresspickerMap.addresspicker( "updatePosition");

        });
    </script>


<div>
    <div class='input'>
      <%= f.label :address %><br />
      <%= f.text_field :address, :id => "addresspicker_map" %>
      <%= f.label :locality %><br />
      <%= f.text_field :locality, :id => "locality", :disabled => "true" %>
      <%= f.label :country %><br />
      <%= f.text_field :country, :id => "country", :disabled => "true" %>
      ...
    </div>
    <div id="map"></div>
    <div id="legend">You can drag and drop the marker to the correct location</div>
  </div>

this is a piece of tutorial I made. I haven't tried it, but this is a start for you. you'll have to style it with css from here:

https://github.com/sgruhier/jquery-addresspicker/blob/master/demos/demo.css

include the js file in the app from here:

https://github.com/sgruhier/jquery-addresspicker/tree/master/src

and images:

https://github.com/sgruhier/jquery-addresspicker/tree/master/demos/images