- 首页
- 其他开发
- 谷歌地图自动完成 js 正在本地主机上工作，但不在 heroku 上
谷歌地图自动完成 js 正在本地主机上工作，但不在 heroku 上
[英] Google maps autocomplete js is working on localhost but not on heroku
本文介绍了谷歌地图自动完成 js 正在本地主机上工作，但不在 heroku 上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是一名初级 ruby on rails 开发人员.我开发了一个使用 Google 地图 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><%结束%>
<div class="footer-search"><!-- 稍后放置链接到评论路径--><%= link_to search_path do %><i class="fa fa-search" aria-hidden="true"></i><%结束%>
<div class="footer-button"><%= simple_form_for(Review.new) 做 |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 class="footer-likes"><%= link_to dashboard_users_path do %><i class="fa fa-heart" aria-hidden="true"></i><%结束%>
<div class="footer-user"><%= link_to user_path(current_user) do %><i class="fa fa-user" aria-hidden="true"></i><%结束%>
<!--开始模态--><div class="modalfade" 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">地方
<div class="inner-wrap"><div id=""><%= text_field_tag :place, nil, class: 'form-control', id: 'user_input_autocomplete_address', placeholder: '开始输入...', size: 80 %>
<div class="section">评论
<div class="inner-wrap"><%= text_field_tag :comment, nil, class:'form-control', placeholder: '食物很好但是地方有点吵', size: 80 %>
<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 class=""><%= f.button :submit, class: "btn btn-primary form-control", id: "click-trigger" %>
<%= 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>
<%结束%><%结束%><!--结束模态--><!-- js开始显示模态--><!-- 注意:自动完成模块位于 assets/javascript/autocomplete.js --><%= content_for :after_js do %><脚本>$('#review_video').change(function(){$('#myModal').modal('show');});<%结束%><!-- js结束显示模态-->
页脚(收集模态和表单)在 layouts/application.html.erb 视图中调用，如下所示.您会看到我在其中使用了 Google API 密钥(隐藏在 application.yml 中)
<头><title><%= meta_title %></title><%= csrf_meta_tags %><!-- 启动 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"><!-- 结束 Favicon --><meta name="description" content="<%= meta_description %>"><!-- Facebook 开放图谱数据--><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 数据--><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 标记--><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" size="152x152" href="/apple-icon-152x152.png"><%= stylesheet_link_tag 'application', media: 'all' %><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 启动 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;"未定义"!==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 identity name_tag set_config reset people.set people.set_once people.increment people.append people.unionpeople.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<!-- 结束混合面板--><身体><%=渲染'共享/闪烁'%><%=产率%><%=渲染'共享/页脚'%><%= 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 '应用程序' %><%=产量:after_js %></html>
最后，允许对输入进行自动完成的 javascript 代码(将user_input_autocomplete_address"作为 id)位于 assets/javascript/autocomplete.js 中，如下所示:
function initializeAutocomplete(id) {var element = document.getElementById(id);console.log('coucou');如果(元素){var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode', 'buildingment'] });google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);}}函数 onPlaceChanged() {var place = this.getPlace();控制台日志(地方)；//取消注释此行以查看 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) {//有些类型是 ["country", "political"]var type_element = document.getElementById(component.types[j]);//返回具有不同 id 的 div，如果 id 不存在则返回 null//console.log(document.getElementById(component.types[j]));如果(类型元素){type_element.value = component.long_name;}}}var formatted_address = document.getElementById('formatted_address');//console.log(international_phone_number);如果(格式化地址){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);//返回具有不同 id 的 div，如果 id 不存在则返回 null//console.log(document.getElementById(component.types[j]));如果(类型内容){控制台日志(地方.类型[i])；type_content.value = place.types[i];}}var international_phone_number = document.getElementById('phone_number');//console.log(international_phone_number);如果(国际电话号码){International_phone_number.value = place.international_phone_number;}var name = document.getElementById('name');如果(姓名){name.value = place.name;}var gplace_id = document.getElementById('gplace_id');如果(gplace_id){gplace_id.value = place.place_id;}var website = document.getElementById('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);如果(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 密钥推送到 heroku(我还检查了这些密钥确实在 heroku 的配置变量中).
- 在 Google 的开发者控制台、我的项目和 Google 地图 javascript API 中，我确保我的浏览器密钥允许用于我的本地主机和我的域名.为了非常准确，我对我的 locahost 和我的域名使用相同的密钥.到目前为止，我还没有设法在 Google 的控制台中做的唯一一件事就是证明我拥有自己的域名.
- 我检查了我还没有达到任何 API 配额.
- 在我的 autocomplete.js 文件中，我使用了一些 console.log 以便在浏览器的检查器中找出代码的哪些部分正在工作.除了'OnPlaceChange'回调中的console.logs，似乎一切正常，因为没有显示Gmap的自动完成建议......;
- 我知道没有看到自动完成建议并不是与 .pac-container css 元素相关的 z-index 问题，因为我已经不得不解决这个问题，而且由于我的键盘箭头无法达到 Gmaps 建议.
- 我读过这篇关于 geocomplete 的帖子(Geocomplete for rails 4 not working在 Heroku 中)并尝试预编译我的资产.这并没有导致任何变化.
- 在我的浏览器检查器(在网络"部分)中，当我在表单输入中写一些东西时，键盘上按下的每个新字母都会触发一个新请求.这些请求名称是AutocompletionService.GetPredictions.....".在标题"部分，我可以看到它们是对 googleapis 的 https 请求，带有 get 方法和 200 状态代码.在响应"部分，我可以看到我的 API 密钥似乎有错误，因为消息是:
/**/_xdc_._ty4oqn &&_xdc_._ty4oqn( [3,null,null,"此API项目无权使用此API.请确保在APIs Console中激活此API:https://console.developers.google.com/apis/library?project=_ 请确保在 Google Developers Console 中激活此 API:https://console.developers.google.com/apis/api/places_backend?project=_ 有关身份验证和 Google Maps Javascript API 服务的更多信息，请参阅:https://developers.google.com/maps/documentation/javascript/get-api-key"] )
我按照错误消息中的链接，将我带到了 Google 的控制台，然后我回到了我的项目和 API 密钥，它们在服务器端和浏览器端都得到了解决.再一次，我在 Google 的控制台中唯一没能做的就是证明我拥有自己的域名.
最后一点是问题的根源(在这种情况下，我想我需要托管服务的帮助)还是你们看到另一个错误?
解决方案
我也有同样的问题.只需转到谷歌控制台，启用Google Places API Web Service"，即可解决问题.
I'm a junior ruby on rails developer. I developed a web app that uses Google maps javascript API and I use the autocomplete function on a form input.
The autocomplete works fine on localhost but does not work anymore after deploying on heroku.
Here is my html.erb below. For your perfect information, the form is in the page footer. This form is partially hidden and the only visible part corresponds to a button used to upload a video file. Once this button has been clicked and the video file has been chosen, I display a modal containing the rest of the form. That's where the 'text_field_tag' (with the id = "user_input_autocomplete_address") is displayed and where the autocomplete should work.
<% 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 -->
The footer (gathering the modal and the form) is called within a layouts/application.html.erb view, which is below. You'll see that I use Google API key in there (hidden in 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>
Last, the javascript code allowing the autocomplete on the input (having "user_input_autocomplete_address" as id) is in assets/javascript/autocomplete.js and is the following :
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');
});
In order to deploy all this on heroku, I already did the following :
- "heroku run db:migrate" in the terminal (because I had some pending
migrations);
- "figaro heroku:set -e production" in the terminal, in order to push all my API keys to heroku (I also checked that these keys are indeed in heroku's config vars).
- in Google's developer console, within my project and within Google map javascript API, I ensured that my browser key is allowed for both my locahost and my domain name. In order to be very precise, I am using the same key for my locahost and my domain name. Until now, the only thing I have not managed to do yet, in Google's console, is to prove that I own my domain name.
- I checked I have not reached any of my API quotas yet.
- Within my autocomplete.js file, I used some console.log in order to find out, in my browser's inspector, what parts of the code are working. It seems that everything works except the console.logs that are in the 'OnPlaceChange' callback, since Gmap's autocomplete suggestions are not shown... ;
- I know that not seeing the autocomplete suggestions is not a problem of z-index associated to the .pac-container css element, since I already had to fix this and since Gmaps suggestions cannot be reached thanks to my keyboard arrows.
- I read this post about geocomplete (geocomplete for rails 4 not working in Heroku) and tried to precompile my assets. That did not lead to any change.
- In my browser inspector (in the 'network' section), when I write something in my form input, every new letter pressed on the keyboard triggers a new request. These requests names are 'AutocompletionService.GetPredictions.....'. In the "headers" section, I can see they are https requests to googleapis, with get methods and 200 status code. In the "response" section, I can see there seems to be a error with my API keys since the message is :
/**/_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"] )
I followed the link in the error message, leading me to Google's console, and I get back to my project and API keys, which are settled both server-side and browser-side. Once again, the only thing i did not managed to do in Google's console was to prove I own my domain name.
Is this last point the origin of the issue (and in this case I guess I need some help from my hosting services) or do you guys see another mistake?
解决方案
I has same issue too.
just goto google console, enable the "Google Places API Web Service", then it will solved the problem.
这篇关于谷歌地图自动完成 js 正在本地主机上工作，但不在 heroku 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
