Using geocode autocomplete in a form

Question

bI have a small form as shown below where user can enter some start and end location address in text format. I want to add the autocomplete feature that is in google maps because most people are lazy to type the entire address.

<%= form_tag("/welcome/index", method: "post") do %>
  <h5>Current Location</h5>
  <%= label_tag :address %><br> 
  <%= text_field_tag :address %>

  <h5>Destination Location</h5>
  <%= label_tag :address %><br> 
  <%= text_field_tag :destaddress %>


  <p>
    <%= submit_tag("Submit") %>
  </p>

Upon doing research i found that it is possible to do with rails using GeoComplete.

Ass suggested by tutorial I tried the following:

I included the required google api scripts in my code and added this

$("address").geocomplete();

It is not working. can someone tell me what I did wrong?

If you just want the google maps autocomplete feature, check out the first answer here: http://stackoverflow.com/questions/13689705/how-to-add-google-maps-autocomplete-search-box?rq=1 — Rob Mulholand, Apr 24 '15 at 15:41
You can add the `id="searchTextField"` by placing `, id: "searchTextField"` after `:address` and `:destaddress` — Rob Mulholand, Apr 24 '15 at 15:43
@RobM and then do i call $("searchTextField).geocomplete(); ? if you can show me steps for answer i can try it and upvote and accept your solution. i would very much appreciate as i am trying this for 5 hours. — user1010101, Apr 24 '15 at 15:45
Depending on google api isn't always reliable, you might have to upgrade unnecessarily. Try this gem, https://github.com/elitmus/autocomplete_locations which lets you save data locally once fetched. — Mukarram Ali, Nov 30 '17 at 04:22

Rob Mulholand · Accepted Answer · 2015-04-24T16:25:47.263

3

Haven't worked with GeoComplete, but a quick and dirty way to get autocomplete working is this:

# application.html.erb
<head>
...
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>

# Your Form
<script type="text/javascript">
  function initialize() {

  var input = document.getElementById('address');
  var autocomplete = new google.maps.places.Autocomplete(input);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script type="text/javascript">
  function initialize() {

  var input2 = document.getElementById('destaddress');
  var autocomplete2 = new google.maps.places.Autocomplete(input2);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<%= form_tag("/welcome/index", method: "post") do %>
  <h5>Current Location</h5>
  <%= label_tag :address %><br> 
  <%= text_field_tag "address" %>

  <h5>Destination Location</h5>
  <%= label_tag :address %><br> 
  <%= text_field_tag "destaddress" %>

<p>
  <%= submit_tag("Submit") %>
</p>

Later, you can move the javascript out to a separate file and include it with erb to clean up the view.

You may have to turn off turbolinks in links to the form ("data-no-turbolink" => true) to be sure the JS will load.

edited Apr 24 '15 at 16:25

answered Apr 24 '15 at 15:57

Rob Mulholand

899
7
7

is it possible to get rid of "powered by google logo" ? – user1010101 Apr 24 '15 at 16:00
Don't think there's a valid way to do that - they're pretty explicit that you have to include the logo: https://developers.google.com/maps/documentation/javascript/places-autocomplete – Rob Mulholand Apr 24 '15 at 16:02
What's the error? I imagine some of the address validation on the model might not be playing nicely with the string you're getting from Autocomplete... – Rob Mulholand Apr 24 '15 at 16:12
No when i added id: "searchTextField" it shows up in my textbox. I think its the not the correct way of adding input.... – user1010101 Apr 24 '15 at 16:14
hm not sure why it's showing up in your textbox but I just realized you probably don't want to be using the same css id twice ... will edit the answer – Rob Mulholand Apr 24 '15 at 16:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76195/discussion-between-robm-and-learner). – Rob Mulholand Apr 24 '15 at 16:26

score 2 · Answer 2 · answered Apr 24 '15 at 16:00

2

You might wanna check out gmaps-autocomplete or gmaps-autocomplete-rails. Both gems have good examples to get you started and do just what you're looking for.

answered Apr 24 '15 at 16:00

rb512

6,880
3
36
55

Using geocode autocomplete in a form

2 Answers2