在某些页面上，遇到 TypeError: 'google.maps.places' 未定义。在主页上可以正常运行

Question

Google Maps Places API 遇到问题：它在主页上正常运行，但在某些其他页面上抛出 TypeError 'google.maps.places' is undefined 。检查控制台后，没有发现其他错误。

这是我的代码。

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&loading=async&libraries=places"></script>
    <script>
        $(document).ready(function(){
            function initAutocomplete() {
                $('.map-location').each(async(index, input) => {

                    var autocomplete = await new google.maps.places.Autocomplete(input);
                    autocomplete.addListener('place_changed', function() {
                        var place = autocomplete.getPlace();
                        if (!place.geometry) {
                            window.alert("No details available for input: '" + place.name + "'");
                            return;
                        }
                        var latitude = place.geometry.location.lat();
                        var longitude = place.geometry.location.lng();
                        $('input[name="latitude"]').val(latitude);
                        $('input[name="longitude"]').val(longitude);
                        console.log("Latitude: " + latitude + ", Longitude: " + longitude);
                    });
                });
            }

            initAutocomplete();
        });
    </script>

在某些页面上，当我尝试根据 Google Maps Places API 中名为“位置”的输入字段的搜索自动填充来检索纬度和经度时，我遇到了问题。虽然它在主页上正常运行，但在其他页面上，它会抛出一个 TypeError ，指出“google.maps.places”未定义。

Answer 1

创建一个新的js文件并将其命名为google_map.js。 将您的 js 代码放入 google_map.js 中。

然后将这 2 个文件放入您的主文件或布局文件中。

在主布局文件中将它们放在正文标记的末尾：

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&loading=async&libraries=places"></script>
<script src="path/to/your/js/folder/google_map.js"></script>