geocomplete for rails 4 not working in Heroku

问题

I'm running a rails 4 app and have installed v1.6 of the jquery geocomplete plugin to provide a google places autocomplete function.

I followed the instructions on the geocomplete github page (http://ubilabs.github.io/geocomplete/)

The plugin works perfectly when running on my localhost, but when I upload my app to heroku, the autocomplete simple doesn't work - the google map does not show and typing in the autocomplete text field doesn't trigger any response. In addition, no other javascript works on the page.

These are the scripts I'm running in my view file:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
  $(function(){
    $("#geocomplete").geocomplete({
      map: ".map_canvas",
      details: "form",
      types: ["geocode", "establishment"],
    });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });
  });
</script>

These are the files I'm requiring in my application.js file

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery.turbolinks
//= require jquery.geocomplete
//= require jquery.geocomplete.min
//= require underscore
//= require gmaps/google
//= require_tree .

This is the html from the top of the page in heroku:

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link data-turbolinks-track="true" href="/assets/application-2b5264bcc7a1f63268dbbba57c51fade.css" media="all" rel="stylesheet" />
    <script data-turbolinks-track="true" src="/assets/application-1a5a53ee82e1bcf8741700c933ffab84.js"></script>
    <meta content="authenticity_token" name="csrf-param" />

     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
      <script src="/javascripts/html5shiv.js"></script>
      <script src="/javascripts/respond.min.js"></script>
<![endif]-->
    </head>
    <body data-no-turbolink="true">

And html from lower down in the document where the google map/autocomplete resides:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<style type="text/css" media="screen">
    .map_canvas { 
                  width: 600px; 
                  height: 400px; 
                  margin: 10px 20px 10px 0;
                }
    form { width: 1000px; float: left; }     
</style>

<br />

  <input id="geocomplete" type="text" placeholder="Type business name/address" size="70" />
  <input id="find" type="button" value="Find" />

  <div class="map_canvas"></div>

  <div class="details">

      <div><%= f.label :name %><br />
      <%= f.text_field :name, { :geo => "name", class: "form-control"} %></div>

      ** other fields not shown here **

  </div>

Really stuck in this one. Has any one had a similar problem?

回答1:

Finally figured out what was wrong with this one.

There was nothing wrong with the code. I need to precompile assets before uploading to Heroku.

i.e. at the command line:

$ bundle exec rake assets:precompile RAILS_ENV=production

This solved the issue.

I'd recommend doing this whenever you've having javascript issues in Heroku.

来源：https://stackoverflow.com/questions/25500862/geocomplete-for-rails-4-not-working-in-heroku

标签

ruby-on-rails

google-maps

jquery-autocomplete

google-places-api