application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

index.html.erb

<%= form_tag places_path, :method => :get do %>
	<%= text_field_tag :q, '', placeholder: "Enter your zipcode or city", class: "search-query"%>
	<%= hidden_field_tag :c, '' %>
	<%= submit_tag "Search Nearby", :name => nil, class: "btn btn-flat"%>
<% end %>

.
.
.
<%  if params[:search].present? %>		

Hi
<%= debug params %>


		<div class="container">
				<div class="well white">
						<h2>Halal Spots: <small>These are all the halal spots near "<%= params[:search] %>"</small></h2>

						<ul class="nav nav-tabs">
								<li class="active"><a href="#tab1" data-toggle="tab">Masjids (<%= @masjids.count %>)</a></li>
								<li><a href="#tab2" data-toggle="tab">Islamic Schools (<%= @islamic_schools.count %>)</a></li>
								<li><a href="#tab3" data-toggle="tab">Restaurants (<%= @restaurants.count %>)</a></li>		
								<li><a href="#tab4" data-toggle="tab">Businesses (<%= @businesses.count %>)</a></li>
							</ul>
			
						<div class="tab-content">
							<div class="tab-pane active" id="tab1">
								<%= will_paginate @masjids %>
								<%= render :partial => "places", :locals => {:places_container => @masjids} %>
							</div>
							<div class="tab-pane" id="tab2">
								<%= will_paginate @islamic_schools %>
								<%= render :partial => "places", :locals => {:places_container => @islamic_schools} %>
							</div>
							<div class="tab-pane" id="tab3">
								<%= will_paginate @restaurants %>
								<%= render :partial => "places", :locals => {:places_container => @restaurants} %>
							</div>
							<div class="tab-pane" id="tab4">
								<%= will_paginate @businesses %>
								<%= render :partial => "places", :locals => {:places_container => @businesses} %>
							</div>
						</div>
					</div>
				</div>	
			
<% else %>			

Hello
<%= debug params %>

<div id="push"></div>

<% end %>

Place.rb

class Place < ActiveRecord::Base
  
  acts_as_gmappable For Google Maps                              
  
  #For Google Maps                               
  def gmaps4rails_address
       "#{address}, #{city}, #{state}, #{zipcode}"
     end

  geocoded_by :complete_address
  after_validation :geocode, :if => :check_address_changed?
  
  def complete_address
    [address, city, state, zipcode].compact.join(', ')
  end
  
  def check_address_changed?
    attrs = %w(address city state zipcode)
    attrs.any?{|a| send "#{a}_changed?"}
  end
  
end

places_controller.rb

def index
    if params[:search].present?
      location = (params[:search][:c].gsub(/[\(\)\[\]\"]/, '') || params[:q])
      @places = Place.near(location, 100, :order => :distance).paginate(:page => params[:page], :per_page => 10)
    else
      @places = Place.scoped.paginate(:page => params[:page], :per_page => 10)
    end
    
    @masjids = @places.where("category = ?", "Masjid")
    @islamic_schools = @places.where("category = ?", "Islamic School")
    @restaurants = @places.where("category = ?", "Restaurant")
    @businesses = @places.where("category = ?", "Business")
    
    @json = @places.to_gmaps4rails

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @places }
    end
  end
  
  def search
      Place.near(params[:search][:c].gsub(/[\(\)\[\]\"]/, '') || params[:q])
  end

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;