未捕获的 ReferenceError：未定义 google答案

【问题标题】：Uncaught ReferenceError: google is not defined未捕获的 ReferenceError：未定义 google
【发布时间】：2012-09-12 02:42:23
【问题描述】：

我想使用地理定位和方向功能，但是出现google is not defined 错误。代码如下：

function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true" + "&callback=initialize";
            document.body.appendChild(script);
        }

好像loadScript不行！

var mapOptions = {
                zoom : 13,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

错误从这里跳出来。有谁知道如何弄清楚吗？我需要使用key来获取地理位置服务，所以我不能使用简单的

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

【问题讨论】：

使用流行标签来描述您正在使用的语言和技术。这将帮助人们找到并回答您的问题。

标签： javascript geolocation

【解决方案1】：

如果你们在控制台中遇到错误，那么这是我应用的简单解决方案。

包括给定顺序的脚本文件..

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

您必须首先包含“maps.googleapis.com/maps/api/js?sensor=false”，然后使用 jquery 库并将其从两者下方删除（它会起作用。）我希望它一定会起作用。

【讨论】：

如果您颠倒顺序，那么 googleapis 行中对 JS 函数的任何“回调”都会导致类似的错误：“yourfunction is not a function。”

【解决方案2】：

我用这段代码自己尝试过——对我来说效果很好

按键动态

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {  height: 100%; }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas { height: 100%;}
    </style>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        }
        var myKey = "ENTER_YOUR_KEY_HERE";
        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }
    </script>
</head>
<body onload="loadScript()">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

无键静态

  ...
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body onload="initialize()">
   ...

在网上冲浪时，我无意中发现了一个重要的注意事项！

谷歌地图 JavaScript API v3

Google Maps JavaScript API v3 不需要 API 密钥即可正常运行。但是，我们强烈建议您加载 Maps API 使用 API 控制台密钥，允许您监控您的应用程序的 Maps API 使用情况。了解如何使用 API 控制台密钥。

见Google Maps API

所以，显然您不再需要开发者密钥！我尝试了 - static no key 和 dynamnic with key - 都有效。

【讨论】：

【解决方案3】：

Google 未定义意味着您的 google 地图库未加载，这意味着您在 https 或 http 上，并且您通过 http ot https 请求，因此将其更改为 https 或 http ...。意思是如果你在 http 那么

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

意思是如果你在 https 那么

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

【讨论】：

你可以使用src="//maps.googleapis.com/maps/api/js?sensor=false"来使用文件取决于http或https。