Geocomplete not working in Rails 5

Question

I have a problem using geocomplete inside my Rails proyect, basically I want to autofill with a place using geocomplete, however the form refuses to work, I've tried with less complex geocomplete functions but nothing seems to be working properly.

I'm using the "geocomplete_rails" gem by the way.

This code I copy-pasted is from one of the geocomplete examples, just much more shorter:

<div id="my_input">

  <input id="geocomplete" type="text" placeholder="Type in an address" 
  autocomplete="off">
  <input class="find_me" type="button" value="Encuentra">
  <div id="my_map">

  </div>

  <div id="my_form">

  </div>

</div>

and here is geo.js

$("#geocomplete").click(function(){
  console.log("Go");
  $("input").trigger("geocode");
});

$("#my_input").geocomplete({
  map: "#my_mappu",
  mapOptions: {
    zoom: 10
  },
  markerOptions: {
    draggable: true
  },
  details: "#my_form"
});

I have already the googlemaps api in my code, inside the head of my html as

<script 
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwAw8El2ksHEry1EmoX6LIoZJsFIPXmdc&libraries=places&"
  async defer>
</script>

and here are my required js files

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require cocoon
//= require turbolinks
//= require dropzone
//= require timepicker
//= require datepicker
//= require jquery-ui
//= require geocomplete
//= require geo
//= require_tree .

What is the weirdest to me is that whenever I ask for an alert outside the "$("#geocomplete").click(function(){" it works, but clicking on the selector does nothing. Any ideas on why this isn't working?

Answer 1

Here you have in your HTML

<div id="my_input">

  <input id="geocomplete" type="text" placeholder="Type in an address" 

...

So the id of your input is geocomplete, and not my_input.

Instead of calling

$("#my_input").geocomplete({ ...

you should call

$(document).ready(function() {

  $("#geocomplete").geocomplete({
    ...

---

Apart from that, you want to put this line

<script src="https://maps.googleapis.com/maps/api/js?key=xxx&librari‌​es=places&" async defer> </script>

at the top of your head section, just after the <title> section

---

To help future people, I made an opensource very simple github repo with a rails app that works => https://github.com/Poilon/super-simple-gplaces