谷歌地图:未捕获引用错误:谷歌未定义

Question

我正在编写一个谷歌地图脚本，该脚本会引发此错误。问题就在这一行：

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

我看不出你在哪里把它链接到了谷歌地图api？

你需要链接这个脚本为谷歌定义：

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

Answer 2

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

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

我发现了这个问题：Google MAP API未压缩类型错误：无法读取属性'；offsetWidth'；的null，答案表明错误是因为在js脚本运行之前没有呈现mapdiv。

尝试：

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

这只会在页面加载后调用脚本。我运行了它，它对我有效。