ruby-on-rails - 谷歌地图自动完成 js 正在本地主机上工作，但不在 heroku 上

Question

我是一名初级 ruby​​ on rails 开发人员。我开发了一个使用 Google maps javascript API 的网络应用程序，并在表单输入上使用了自动完成功能。

自动完成在 localhost 上工作正常，但在部署到 heroku 后不再工作。

下面是我的 html.erb。为了您的完美信息，表格位于页脚中。此表单部分隐藏，唯一可见的部分对应于用于上传视频文件的按钮。单击此按钮并选择视频文件后，我将显示一个包含表单其余部分的模式。这就是显示“text_field_tag”(id =“user_input_autocomplete_address”)和自动完成应该工作的地方。

<% if user_signed_in? %>

<div class="footer-check hidden-md hidden-lg">
  <div class="container text-right">
    <div class="row">
      <div class="flexbox">
        <div class="footer-home active">
          <%= link_to root_path do %>
            <i class="fa fa-home" aria-hidden="true"></i>
          <% end %>
        </div>
        <div class="footer-search">
        <!-- later put link_to reviews_path -->
          <%= link_to search_path do %>
            <i class="fa fa-search" aria-hidden="true"></i>
          <% end %>
        </div>
        <div class="footer-button">
        <%= simple_form_for(Review.new) do |f| %>
          <div id="add_video_image_btn">
            <label for="review_video", class="add_video_image"><%= image_tag "plus.png" %></label>
            <%= f.input :video, label: false, input_html: { accept: ".mp4, .mov, .m4v, .wmv, .webm, .avi", class: 'hidden'} %>
            <%= f.input :video_cache, as: :hidden, class: "add_video_image file required" %>
          </div>
        </div>
        <div class="footer-likes">
          <%= link_to dashboard_users_path do %>
            <i class="fa fa-heart" aria-hidden="true"></i>
          <% end %>
        </div>

        <div class="footer-user">
          <%= link_to user_path(current_user) do %>
            <i class="fa fa-user" aria-hidden="true"></i>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Beginning Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-body">
      <div id="add_video_form_step2">
        <%= f.error_notification %>

        <fieldset class="form-group" style="margin-bottom:0;">

          <div class="section">
            Place
          </div>
          <div class="inner-wrap">
            <div id="">
              <%= text_field_tag :place, nil, class: 'form-control', id: 'user_input_autocomplete_address', placeholder: 'Start typing...', size: 80 %>
            </div>
          </div>

          <div class="section">
            Comment
          </div>
          <div class="inner-wrap">
            <%= text_field_tag :comment, nil, class:'form-control', placeholder: 'Food is good but the place is a bit noisy', size: 80 %>
          </div>

          <div class="inner-wrap" style="padding:15px;">
            <div class="emoji-toggle emoji-happy">
              <input type="checkbox" id="toggle1" class="toggle" name="review[mood]" value="false">
              <div class="emoji"></div>
              <label for="toggle1" class="well"></label>
            </div>
          </div>

          <div class="">
            <%= f.button :submit, class: "btn btn-primary form-control", id: "click-trigger" %>
          </div>

          <%= hidden_field_tag :name, id: 'name' %>
          <%= hidden_field_tag :street_number, id: 'street_number' %>
          <%= hidden_field_tag :route, id: 'route' %>
          <%= hidden_field_tag :locality, id: 'locality' %>
          <%= hidden_field_tag :administrative_area_level_1, id: 'administrative_area_level_1' %>
          <%= hidden_field_tag :postal_code, id: 'category_0' %>
          <%= hidden_field_tag :country, id: 'country' %>
          <%= hidden_field_tag :formatted_address, id: 'formatted_address' %>
          <%= hidden_field_tag :phone_number, id: 'phone_number' %>
          <%= hidden_field_tag :website, id: 'website' %>
          <%= hidden_field_tag :gplace_id, id: 'gplace_id' %>
          <%= hidden_field_tag :category_0, id: 'category_0' %>
          <%= hidden_field_tag :category_1, id: 'category_1' %>
          <%= hidden_field_tag :category_2, id: 'category_2' %>
          <%= hidden_field_tag :category_3, id: 'category_3' %>
          <%= hidden_field_tag :category_4, id: 'category_4' %>
          <%= hidden_field_tag :category_5, id: 'category_5' %>
          <%= hidden_field_tag :hours_open_day_0, id: 'hours_open_day_0' %>
          <%= hidden_field_tag :hours_open_day_1, id: 'hours_open_day_1' %>
          <%= hidden_field_tag :hours_open_day_2, id: 'hours_open_day_2' %>
          <%= hidden_field_tag :hours_open_day_3, id: 'hours_open_day_3' %>
          <%= hidden_field_tag :hours_open_day_4, id: 'hours_open_day_4' %>
          <%= hidden_field_tag :hours_open_day_5, id: 'hours_open_day_5' %>
          <%= hidden_field_tag :hours_open_day_6, id: 'hours_open_day_6' %>
        </fieldset>
      </div>
    </div>
    </div>
  </div>
</div>

      </div>
      </div>
    </div>
  </div>
<% end %>
<% end %>

<!--End Modal -->

<!-- Start of js to display the modal -->
<!-- NB: the autocomplete module is in assets/javascript/autocomplete.js -->
<%= content_for :after_js do %>
  <script>
    $('#review_video').change(function(){
      $('#myModal').modal('show');
    });
  </script>
<% end %>
<!-- End of js to display the modal -->

页脚(收集模式和表单)在 layouts/application.html.erb View 中调用，如下所示。您会看到我在那里使用了 Google API key (隐藏在 application.yml 中)

<!DOCTYPE html>
<html>
  <head>
    <title><%= meta_title %></title>
    <%= csrf_meta_tags %>

    <!-- Start Favicon -->

    <%= favicon_link_tag '_/app/assets/images/favicon.ico' %>

    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="<%= image_path 'ms-icon-144x144.png' %>">
    <meta name="theme-color" content="#ffffff">
    <!-- end Favicon -->

    <meta name="description" content="<%= meta_description %>">

    <!-- Facebook Open Graph data -->
    <meta property="og:title" content="<%= meta_title %>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= request.original_url %>" />
    <meta property="og:image" content="<%= meta_image %>" />
    <meta property="og:description" content="<%= meta_description %>" />
    <meta property="og:site_name" content="<%= meta_title %>" />

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="<%= DEFAULT_META["twitter_account"] %>">
    <meta name="twitter:title" content="<%= meta_title %>">
    <meta name="twitter:description" content="<%= meta_description %>">
    <meta name="twitter:creator" content="<%= DEFAULT_META["twitter_account"] %>">
    <meta name="twitter:image:src" content="<%= meta_image %>">

    <!-- Google+ Schema.org markup -->
    <meta itemprop="name" content="<%= meta_title %>">
    <meta itemprop="description" content="<%= meta_description %>">
    <meta itemprop="image" content="<%= meta_image %>">



    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- start Mixpanel -->
    <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
      for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
      mixpanel.init("ENV['MIXPANEL_TOKEN']");
    </script>
    <!-- end Mixpanel -->

  </head>
  <body>
    <%= render 'shared/flashes' %>
    <%= yield %>
    <%= render 'shared/footer' %>
    <%= javascript_include_tag "http://maps.google.com/maps/api/js?libraries=places&key=#{ENV['GMAP_BROWSER_KEY']}" %>
    <%= javascript_include_tag "http://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js" %>
    <%= javascript_include_tag 'application' %>
    <%= yield :after_js %>
  </body>
</html>

最后，允许输入自动完成的 javascript 代码(将“user_input_autocomplete_address”作为 id)位于 assets/javascript/autocomplete.js 中，如下所示:

function initializeAutocomplete(id) {
  var element = document.getElementById(id);
  console.log('coucou');
  if (element) {
    var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode', 'establishment'] });
    google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
  }
}

function onPlaceChanged() {
  var place = this.getPlace();

  console.log(place);  // Uncomment this line to view the full object returned by Google API.

  for (var i in place.address_components) {
    var component = place.address_components[i];
    // console.log(component.types);
    for (var j in component.types) {  // Some types are ["country", "political"]
      var type_element = document.getElementById(component.types[j]); // Returns the div with their differents ids or null if the id doesnt exist
      // console.log(document.getElementById(component.types[j]));
      if (type_element) {
        type_element.value = component.long_name;
      }
    }
  }

  var formatted_address = document.getElementById('formatted_address');
  // console.log(international_phone_number);
  if (formatted_address) {
    formatted_address.value = place.formatted_address;
  }

  for (var i in place.types) {
    // console.log(place.types);
    // console.log(i);
    // console.log(place.types[i]);
    var type_content = document.getElementById('category_' + i); // Returns the div with their differents ids or null if the id doesnt exist
    // console.log(document.getElementById(component.types[j]));
    if (type_content) {
      console.log(place.types[i]);
      type_content.value = place.types[i];
    }
  }

  var international_phone_number = document.getElementById('phone_number');
  // console.log(international_phone_number);
  if (international_phone_number) {
    international_phone_number.value = place.international_phone_number;
  }

  var name = document.getElementById('name');
  if (name) {
    name.value = place.name;
  }

  var gplace_id = document.getElementById('gplace_id');
  if (gplace_id) {
    gplace_id.value = place.place_id;
  }

  var website = document.getElementById('website');
  if (website) {
    website.value = place.website;
  }

  for (var i in place.opening_hours.weekday_text) {
    var hours_open_in_db = place.opening_hours.weekday_text[i];
    var hours_open_in_form = document.getElementById('hours_open_day_' + i);
    if (hours_open_in_form) {
      hours_open_in_form.value = hours_open_in_db;
    }
  }
}

google.maps.event.addDomListener(window, 'load', function() {
  initializeAutocomplete('user_input_autocomplete_address');
});

为了在heroku上部署所有这些，我已经做了以下事情:

终端中的“heroku run db:migrate”(因为我有一些待处理
迁移)；

终端中的“figaro heroku:set -e production”，以便将我所有的 API key 推送到 heroku(我还检查了这些 key 确实在 heroku 的配置变量中)。

在谷歌的开发者控制台、我的项目和谷歌地图 JavaScript API 中，我确保我的浏览器 key 对于我的本地主机和我的域名都是允许的。为了非常精确，我对我的本地主机和我的域名使用相同的 key 。到现在为止，在谷歌的控制台中，我唯一没有做的事情就是证明我拥有我的域名。

我检查了我还没有达到我的任何 API 配额。

在我的 autocomplete.js 文件中，我使用了一些 console.log，以便在浏览器的检查器中找出代码的哪些部分正在工作。似乎除了'OnPlaceChange'回调中的console.logs之外一切正常，因为没有显示Gmap的自动完成建议......;

我知道看不到自动完成建议不是与 .pac-container css 元素相关联的 z-index 问题，因为我已经必须解决这个问题，并且由于我的键盘箭头无法达到 Gmaps 建议。

我阅读了这篇关于 geocomplete (geocomplete for rails 4 not working in Heroku) 的帖子，并尝试预编译我的 Assets 。这并没有带来任何改变。

在我的浏览器检查器中(在“网络”部分)，当我在表单输入中写一些东西时，键盘上按下的每个新字母都会触发一个新请求。这些请求名称是“AutocompletionService.GetPredictions ...”。在“ header ”部分，我可以看到它们是对 googleapis 的 https 请求，带有 get 方法和 200 状态码。在“响应”部分，我可以看到我的 API key 似乎有错误，因为消息是:

/**/_xdc_._ty4oqn && _xdc_._ty4oqn( [3,null,null,"This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console: https://console.developers.google.com/apis/library?project=_ Please ensure this API is activated in the Google Developers Console: https://console.developers.google.com/apis/api/places_backend?project=_ For more information on authentication and Google Maps Javascript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key"] )

我按照错误消息中的链接，将我带到 Google 的控制台，然后我回到我的项目和 API key ，这些 key 在服务器端和浏览器端都已解决。再一次，我在谷歌控制台中唯一没能做到的就是证明我拥有我的域名。

最后一点是问题的根源(在这种情况下，我想我需要托管服务的一些帮助)还是你们看到另一个错误？

Answer 1

我也有同样的问题。
只需转到谷歌控制台，启用“Google Places API Web Service”，即可解决问题。