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>。

这对我有用：

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);
};

<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>