3
私はレール開発者のジュニアルビーです。私は、Googleマップのjavascript APIを使用するWebアプリケーションを開発し、フォーム入力にオートコンプリート機能を使用します。Googleマップオートコンプリートjsはローカルホストでは動作しますが、英雄では動作しません
autocompleteは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 -->（モーダル、フォームを収集）フッタは、以下であるレイアウト/ application.html.erbビュー内で呼び出されます。あなたは
<!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コード（IDとして "user_input_autocomplete_address" を有する（application.ymlに隠された）、私はそこで、GoogleのAPIキーを使用していることがわかります）資産/ジャバスクリプト/ 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のはデシベルを実行します。移行」（私はいくつかの保留 移行を持っていたので）ターミナルで、
- 私のすべてのAPIキーを英雄にプッシュするために、端末の "figaro heroku：set -e production"（これらのキーは本当にherokuの設定値であることも確認しました）。
- Googleのデベロッパーコンソールで、自分のプロジェクト内でGoogleマップのjavascript API内で、私のブラウザキーが私のロカホストと私のドメイン名の両方に許可されていることを確認しました。非常に正確にするために、私はロカストとドメイン名に同じキーを使用しています。これまでのところ、Googleのコンソールではまだ管理していない唯一のことは、自分のドメイン名を所有していることを証明することです。
- 私は自分のAPIクォータにまだ達していないことを確認しました。
- 私のautocomplete.jsファイル内で、ブラウザのインスペクタで、コードのどの部分が動作しているかを調べるために、console.logを使用しました。 Gmapのオートコンプリート提案は表示されないので、 'OnPlaceChange'コールバックにあるconsole.logs以外はすべて動作しているようです。
- 自動補完候補が表示されないことは、既に修正が必要だったので、そしてキーボード矢印のおかげでGmapsの提案に到達できないため、.pac-container CSS要素に関連付けられたZ-インデックスの問題ではないことが分かりました。
- 私はgeocomplete（geocomplete for rails 4 not working in Heroku）についてこの記事を読んで、私の資産をプリコンパイルしようとしました。それは何の変化ももたらさなかった。
- 私のブラウザインスペクタ（ 'network'セクション）で、フォーム入力に何かを書くと、キーボードで押された新しい文字がすべて新しいリクエストをトリガします。これらのリクエスト名は「AutocompletionService.GetPredictions .....」です。 「ヘッダー」セクションでは、getメソッドと200のステータスコードを使用してgoogleapisへのhttpsリクエストを確認できます。
/**/_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 Javascript APIに加えて、Google Places API Webサービスが暗黙のうちに呼び出されていると思う。 – Quentin
5時間後に髪が引き裂かれた。ありがとう！ – domoarrigato