javascript - Drupal 7 - Javascript 与 Google map 自动完成的集成问题

Question

我正在尝试解决使用 Google map 自动完成功能时遇到的集成问题，我必须在我的 drupal 7 网站上集成 javascript 代码。下面的代码在 jsfiddle 上工作正常，但在 drupal 网站上情况并非如此，我找不到为什么自动完成不执行任何操作。

以下是一些可能对我解决此问题有用的信息。

• 我将代码集成到正文后面的“script”标记中。
• 控制台中未显示任何错误。
• 我使用 drupal 7 Webforms，但这应该不是问题，因为我还使用 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 map 自动完成功能的建议？我做错了什么？

请提出建议。

Answer 1

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

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