Javascript 在rails应用程序中使用google places search autocomplete

我想在rails表单中使用GooglePlacesAutoComplete

我使用的是rails v5.1.1

我关注这篇文章：

我的应用程序布局包含以下内容：

    ...lots of layout code
    <% yield %>

        <!-- this is to yield for additional page specific JS from other external sources -->
        <%= yield :additional_page_js %>

        <%= yield :additional_js %>
</body>

附加内容的

内容包含以下内容：

用于旅行的css.css具有以下功能：

 #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }

当页面加载时-pac输入字段不显示-事实上它根本不在生成的HTML中：

<%= p.input :name ,  label: 'Origin', error: 'An origin is mandatory - where did you begin?' , hint: 'Where did you begin?', :input_html => { :id => "pac-input", :class => "controls" } %>

请有人能帮我得到这个谷歌搜索自动完成领域的工作
 问题有两个组成部分

1/地图分区没有大小，因此没有显示。通过更改html以给它一个大小-在页面上加载现在呈现的地图

<div id="origin_map" style='width: 100%; height: 30rem;'></div>

我对前端了解不多，但是否需要一个
div
来编辑
additional\u page\u js
和
additional\u js
？你不这么认为吗？js本身加载到页面中非常好。哦。。。好吧
<%= p.input :name ,  label: 'Origin', error: 'An origin is mandatory - where did you begin?' , hint: 'Where did you begin?', :input_html => { :id => "pac-input", :class => "controls" } %>

 var searchBox = new google.maps.places.SearchBox(input);

<div id="origin_map" style='width: 100%; height: 30rem;'></div>

map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);