Question

谷歌地图：未捕获的 ReferenceError：谷歌未定义

2015-12-12

1138

javascript google-maps

我正在编写一个谷歌地图脚本，它抛出了这个错误。问题出在这行：

var map = new google.maps.Map(document.getElementById('google-map'), {

对应的 Javascript 文件是： https://goo.gl/xS5912 对应的 HTML 代码段是：

<!-- Google Maps -->
    <div id="google-map"></div>

完整 HTML 是： https://goo.gl/xHD2wL

问题的屏幕截图在这里： http://prntscr.com/9dgplc

该网站已托管在这里： https://goo.gl/8x76Ux

我看到过一些针对此问题提出解决方案的问题，但我并没有真正理解其中的大部分：异步加载脚本或拥有开发人员 API 密钥。
我只是在寻找问题的解决方案，最好是对问题是什么的逻辑解释。

完整代码位于此处。

编辑 1： API 链接缺失。我已添加该链接，错误已消失，但地图仍未显示。（请注意，我已使用 PHP 将代码分成几段。）

Answer 1

我没看到您在任何地方将其链接到 Google Maps API？

您需要链接此脚本才能定义 google：

<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 2

我运行了您的脚本，似乎以下错误非常常见。

Uncaught TypeError: Cannot read property 'offsetWidth' of null

我发现了这个问题： Google MAP API Uncaught TypeError：无法读取 null 的属性“offsetWidth” ，答案表明该错误是由于在 js 脚本运行之前未呈现地图 div 造成的。

尝试：

<script>
/* Your location */
function initialize () {
    var locations = [
        ['IIIT Hyderabad, Gachibowli, Hyderabad <span>Head Office</span>', 17.444792, 78.348310, 1]
    ];

    /* Map initialize */
    var mapCanvas = document.getElementById('google-map');
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(17.444792, 78.348310),
        panControl: false,
        zoomControl: true,
        scaleControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    }

google.maps.event.addDomListener(window, 'load', initialize);
</script>

这仅在页面加载后调用脚本。我运行了它，它对我来说是有效的。