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

Question

希望有人能提供帮助。

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

我想要实现的是，模态 window 中的输入，其中用户提供 2 件事：

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

理想情况下，我想强制用户通过从 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 中发生，我在网上找到了很多关于创建这些自动完成框的有用资源，但是 none 它们确实迎合了我的需求需要。此外，我看到的所有示例都因 Google API 的不同版本而异，有些已经很老了。而且他们都倾向于有一个大的 Google 地图和一个我不需要的下拉图钉。

我已经使用 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();

感谢您的帮助。

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

How to create a Google Address Autocomplete search box with additional hidden fields (longitude, latitude)?

html

javascript

google-maps-api-3

google-places-api

googleplacesautocomplete