谷歌地图地理编码：“谷歌未定义”

Question

当我尝试加载此代码时遇到问题，我不知道为什么它不起作用......

<script type="text/javascript">
    $(document).ready(function()
    {
        var geocoder = new google.maps.Geocoder();
        $(".textarea-autosize").autosize();

        geocoder.geocode({
            address: '{$order->address_delivery["address1"]},{$order->address_delivery["postecode"]},{$order->address_delivery["city"]}'
            }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK)
            {
                var delivery_map = new google.maps.Map(document.getElementById('map-canvas'), {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: results[0].geometry.location
                });
                var delivery_marker = new google.maps.Marker({
                    map: delivery_map,
                    position: results[0].geometry.location,
                    url: 'http://maps.google.com?q={$order->address_delivery["address1"]},{$order->address_delivery["postcode"]},{$order->address_delivery["city"]}'
                });
                google.maps.event.addListener(delivery_marker, 'click', function() {
                    window.open(delivery_marker.url);
                });
            }
        });
    });

    // Fix wrong maps center when map is hidden
    $('#tabAddresses').click(function(){
        x = delivery_map.getZoom();
        c = delivery_map.getCenter();
        google.maps.event.trigger(delivery_map, 'resize');
        delivery_map.setZoom(x);
        delivery_map.setCenter(c);

    });
</script>

错误发生在 var geocoder = new google.maps.Geocoder();

然后我尝试加载以下脚本： <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

我得到另一个错误：

'未捕获的类型错误：无法读取 null 的属性 'offsetWidth'

有没有人知道为什么它不起作用？

Answer 1

当您尝试调用它时，未加载 Google 地图。你应该使用这个：

HTML：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap" async defer></script>

JS：

function initMap() {
    // Google maps are now initialized.
}

您需要在脚本中包含async 和 defer属性 - 这将确保网站的其余部分继续加载而不是等待脚本加载（这很方便，因为它非常大）。其次，在调用脚本时传递“回调”参数。这是加载脚本时应执行的函数的名称。通过这种方式，您可以确保仅在地图实际加载并出现在您的窗口中时才对其进行初始化。