Drupal 7 - 与谷歌地图自动完成的 Javascript 集成问题答案

【问题标题】：Drupal 7 - Javascript integration issue with Google Maps AutocompleteDrupal 7 - 与谷歌地图自动完成的 Javascript 集成问题
【发布时间】：2016-09-09 17:05:05
【问题描述】：

我正在尝试解决我在使用 Google 地图自动完成时遇到的集成问题，我必须在我的 drupal 7 网站上集成 javascript 代码。下面的代码在 jsfiddle 上运行良好，但在 drupal 网站上并非如此，我无法找到自动完成不执行任何操作的原因。

这里有一些信息可能对我解决这个问题有用。

我将代码集成在正文之后的“脚本”标签中。
控制台中未显示错误。
我使用 drupal 7 网络表单，但这应该不是问题，因为我还使用 html.tpl.php 脚本中的其他 javascript 代码来定位其他表单输入。

代码如下：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&KEY"> ... </script>

Javascript

data = [{
  "1" : ["1007","1020"],
  "2" : ["1201","1493"],
  "3" : ["6754","8652"],
}]

var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['(regions)'],
  componentRestrictions: {country: 'ch'}
};

autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
        for (var j = 0; j < place.address_components[i].types.length; j++) {
            if (place.address_components[i].types[j] === "postal_code") {
                var value = place.address_components[i].long_name;
                document.getElementById('locality').value = value;
                var foundIt = false;

                for (var i = 0; i < data.length && !foundIt; i++) {
                    for (var key in data[i]) {
                        if (key in data[i]) {
                            if (data[i][key].indexOf(value) !== -1){
                                document.getElementById('text').innerHTML = key;
                                foundIt = true;
                            } 
                        }

                    }
                    if (!foundIt) {
                        document.getElementById('text').innerHTML = 0;
                    }
                }
          } 
       }
  }
})

代码只是从自动完成建议中获取谷歌地图邮政编码并检查它是否在数据中，在 JsFiddle 上一切正常，所以我不知道这是否也会影响网站。

HTML（只是此代码的表单示例）

<form>
    <input id="text"/>
    <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
</form>

为什么我没有来自 Google 地图自动填充的建议？我做错了什么？

请提出建议。

【问题讨论】：

标签： javascript google-maps drupal-7

【解决方案1】：

尝试了几个小时后，我发现我必须将JS放在一个函数中并启动它，如下所示。

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>

【讨论】：