jQuery Geocoding and Places Autocomplete

<%= simple_form_for(@event_map) do |f| %>
  <%= hidden_field_tag :lat, nil, id: "lat" ,value: ""%>
  <%= hidden_field_tag :lng, nil, id: "lng",value: "" %>

  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%#= f.input :address %>
    <%= f.input :address, :label =>"Direction", :input_html => {:id=> 'autocomplete'}, :placeholder => 'Enter address' %>
    <%= f.input :street, :input_html =>{:id => 'route'} %>
    <%= f.input :street_number,  :input_html =>{:id => 'street_number'} %>
    <%= f.input :postal_code,  :input_html =>{:id => 'postal_code'} %>
    <%= f.input :city,  :input_html =>{:id => 'locality'} %>
    <%= f.input :state,  :input_html =>{:id => 'administrative_area_level_2'} %>
    <%= f.input :country, collection: EventMap.all,as: :select, :input_html =>{:id => 'country'} %>

    <%= f.input :start_date %>
    <%= f.input :end_date %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>

<script type="text/javascript">
$("#autocomplete").geocomplete()
          .bind("geocode:result", function(event, result){
            console.log("Data", result);
            $("#lat").val(result.geometry.viewport.ga.j)
            $("#lng").val(result.geometry.viewport.ga.l)

          });
</script>