如何创建带有附加隐藏字段（经度、纬度）的 Google 地址自动填充搜索框？

Question

希望有人能提供帮助。

我目前正在构建一个网站，其中存储一些场所（位置）信息以供在应用程序中使用。

我想要实现的是，在用户提供两件事的模式窗口中输入：

1. 场地名称（用户可以随意命名 - 这很简单）。
2. 一个 Google 地址自动填充框，用户开始输入地址并自动填充结果 - 这是我需要帮助的部分。
3. 整个地址需要是单个输入，因为我将其存储为一个大字符串（我不需要将其分解为街道、地址、邮政编码等）
4. 我还需要从自动创建的地址中获取填充地址的经度和纬度，并将其应用于隐藏字段。

理想情况下，我希望通过从 Google 地址中选择一个选项来强制用户提交表单，而不是手动输入内容。但这并不是疯狂的必需品，更多的是锦上添花。

这是我的表单输入：

<form method="POST" action="{{ route('manage.venue.create', $url_extension) }}">
    @csrf

    <div class="form-group">
        <label for="amount">Venue Name</label>
            <input id="name"
                   type="text"
                   class="form-control"
                   name="name"
                   autofocus
                   placeholder="Enter Venue Name">
    </div>

    <div class="form-group">
        <label for="amount">Address</label>
        <input id="address"
               type="text"
               class="form-control"
               name="address"
               autofocus
               placeholder="Enter Location Name">
        <input type="hidden" name="latitude" id="latitude" value="0" />
        <input type="hidden" name="longitude" id="longitude" value="0" />
    </div>

    <br>

    <button type="submit" class="btn btn-primary">Save</button>

</form>

我知道所有的魔法都需要在 Javascript 中发生，我在网上找到了很多关于创建这些自动完成框的有用资源，但是它们都没有真正满足我的需要。此外，我看到的所有示例都因 Google API 的不同版本而异，有些已经很老了。而且他们都倾向于有一个大的谷歌地图，还有一个我不需要的下拉图钉。

我已经使用 API 密钥创建了一个 GCP 项目，并启用了所有必要的 API。

非常感谢您对此提供任何帮助，谢谢。

Answer 1

已解决：http://jsfiddle.net/upsidown/GVdK6/

function initialize() {

var ac = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
  types: ['geocode']
});

ac.addListener('place_changed', function() {

var place = ac.getPlace();

if (!place.geometry) {
  // User entered the name of a Place that was not suggested and
  // pressed the Enter key, or the Place Details request failed.
  window.alert("No details available for input: '" + place.name + 
 "'");
  return;
}

var html = '<div>Latitude: ' + place.geometry.location.lat() + 
'</div>';
html += '<div>Longitude: ' + place.geometry.location.lng() + 
'</div>'; 

  document.getElementById('geometry').innerHTML = html;
  });
  }

initialize();

感谢您的帮助。