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

【问题标题】：Google Maps geocoding : "google is not defined"谷歌地图地理编码：“谷歌未定义”
【发布时间】：2016-07-25 06:04:05
【问题描述】：

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

<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>

我得到另一个错误：

'Uncaught TypeError: 无法读取属性'offsetWidth' of null'

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

【问题讨论】：

标签： php maps prestashop geocoding google-geocoder

【解决方案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 and defer 属性 - 这将确保网站的其余部分继续加载，而不是等待脚本加载（这很方便，因为它很大）。其次，在调用脚本时传递“回调”参数。这是加载脚本时应执行的函数的名称。这样，您可以确保仅在地图实际加载并显示在您的窗口中时才对其进行初始化。

【讨论】：

也许对你所做的事情有更详细的解释？我知道，但我认为 OP 不会得到它。

【解决方案2】：

只需将此脚本添加到您的 html 文件中：

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

如果您想测试 google geocoding api 或查看一些代码，请查看此链接。 Google Geocoding Service API Source

【讨论】：