Google Api没有处理附加输入

Question

背景：

我正在尝试将Google地址搜索添加到在线店面。我无法访问网站的实际html，但我可以将代码输入页眉，页脚，并包含我想要的任何css或js页面。我开始时一切都在工作。我在标题中输入了，并且能够搜索地址。

创建了：

因此，在我的代码工作之后，是时候将输入向下移动到其他地址输入。我想使用javascript根据父ID在div中附加此输入。所以我用这段代码做了这个：

window.onload = function () {
    var input = document.createElement('div');
    input.setAttribute("id", "locationField");
    input.innerHTML = '<input id="autocomplete" placeholder="Enter your address" onfocus="geolocate()" type="text" autocomplete="off">';

    var form = document.getElementById('NameAdd');
    form.insertBefore(input, form.firstChild);
};

产生了这个：

现在我以这种方式包含输入，但它没有显示谷歌搜索结果。在检查页面元素时，一切看起来都很好。我做错了什么？

Answer 1

google.maps.places.Autocomplete构造函数采用<input>元素，而不是<div>。

这对我有用：

＆＃13;

＆＃13;

window.onload = function() {
  var inputDiv = document.createElement('div');
  inputDiv.setAttribute("id", "locationField");

  // create input element dynamically so don't need to wait for it to render
  var input = document.createElement('input');
  input.setAttribute("id", "autocomplete");
  input.setAttribute("placeholder", "Enter your address");
  input.setAttribute("type", "text");
  input.setAttribute("autocomplete", "off");
  inputDiv.appendChild(input);

  var form = document.getElementById('NameAdd');
  form.insertBefore(input, form.firstChild);
  var autocomplete = new google.maps.places.Autocomplete(input);
};

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<form id="NameAdd">
  <br />
  <input id="Name" value="name" />
  <input id="Address" value="address" />
</form>

＆＃13;

＆＃13;

＆＃13;