Geocoder: Over query limit Javascript Fix

search.html.haml

= form_tag :search, method: :get, id:'search' do |f|
  = text_field_tag :q, '', placeholder:'City, address, or zip code'
  = hidden_field_tag :c, ''
  = submit_tag "Go"

search.js.erb

function loadGeocoder() {

  var searchForm = $('form#search');
  var query = searchForm.find('input[name="q"]');
  var geocoder = new google.maps.Geocoder();

  var coordinates = searchForm.find('input[name="c"]');
  query.change(function() { coordinates.val(""); }); // clear coordinates on query change

  searchForm.submit(function(event) {
    if (coordinates.val() === "") {
      event.preventDefault();

      if ( geocoder ) {
        geocoder.geocode({'address':searchForm.find('input[name="q"]').val()}, function(results, status) {
          if ( status == google.maps.GeocoderStatus.OK) {
            // Submit with new coordinates
            coordinates.val(results[0].geometry.location);
            searchForm.submit();
          }
        });
      }
    }
  });
}

function loadScript() {
  if ( typeof google === 'undefined' ) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?<%= "key=#{ENV['MAPS_API_KEY']}&" if Rails.env.production? %>sensor=false&callback=loadGeocoder";
    document.body.appendChild(script);
  } 
  else {
    loadGeocoder();
  }
}

window.onload = loadScript;

search_controller.rb

class SearchController < ApplicationController

  def search
    Place.near(params[:search][:c] || params[:search][:q])
  end
  
end

Found this from SO, thanks for your solution! However, it seems like this is not 100% correct if you are also using jquery in rails. Jquery rails has its own formSubmitSelector and 'submit.rails' event that the event is propagated to. So event.preventDefault() does not prevent submission in this case. What ends up happening sometimes is the geocoding asynch response is sent, but the form is submitted anyways, before the geocode callback can happen. This means no coordinates are passed in from the client side.

I'm not sure what the solution is to this, if you have any ideas I'd love to hear them!

@kurioscreative I like this approach, but If I need to store the city, state, country of the location based of the lat long coordinates - i'm having a terrible time parsing each api response because based on the input, there are a different number of responses ( Russia - responds with far more matches than - 1234 big walk way, Venice beach, California) - am I doomed to pay $10/ mo for quota guard?
https://devcenter.heroku.com/articles/quotaguard

Thanks for the post though.