How can I resolve "Uncaught ReferenceError: google is not defined"? (Google MAPS API)

Question

我有一个项目，其中包括显示一张 google 地图，其中包含与城市地点相关的信息（兴趣点，例如学校、餐厅、地铁......）但我必须先学会使用 API。

我很难显示一个简单的标记，实际上我在 Chrome 控制台中有 "Uncaught ReferenceError: google is not defined"，但标记没有出现。我在论坛上到处搜索，但没有任何帮助。

我给你我的小HTML代码：

    <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p> TEST MAP </p>
<div id="map" style="height: 500px; width:900px;"></div>



<script type="text/javascript" src="test.js"></script>

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

<!-- Si le script n'est pas lu par le navigateur -->
<noscript>
    <p>Attention : </p>
    <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
    <p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
    <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>

</body>
</html>

那么，这是我的 Javascript 代码：

    var maCarte;

    function initMap() {
        var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
      }
      maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);
    }

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
                        position: {lat: 43.4810896, lng: -1.540436}, 
                        map: maCarte
                    };

    var marqueur = new google.maps.Marker(optionsMarqueur);

Answer 1

您需要在加载测试代码之前加载 googleapis。

编辑：你能把这些也移到头部吗？

<script defer  src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"></script> 
<script defer type="text/javascript" src="test.js"></script>

async 和 defer 做两个不同的事情，你不应该把它们放在同一个脚本标签中。

async 在 HTML 解析期间下载文件，并会在 HTML 解析器完成下载后暂停执行它。

defer 在 HTML 解析期间下载文件，并且只会在解析器完成后执行它。

Answer 2

您使用了 asyn 和 defer 属性：

async: 加载异步脚本
defer: 最后执行

但是您的 test.js 是同步加载和执行的：在 google maps sdk 之前因此 google 未定义

http://www.w3schools.com/tags/att_script_async.asp

http://www.w3schools.com/tags/att_script_defer.asp

Answer 3

Google 地图已加载 asynchronously - 即使您直接包含脚本标签。所以不要使用任何 google.maps 类（比如 google.maps.Marker），直到在你的回调中（你指定为 initMap）。

修改 test.js，以便在 initMap 回调中创建您的标记。

您也在使用 maCarte，而它仍然是 undefined。因此，您只需要在创建标记之后将其添加到地图 (maCarte) 中：

    var maCarte;
    var marqueur

function initMap() {

    var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
    }

    maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
        position: {lat: 43.4810896, lng: -1.540436}, 
        map: maCarte
    };

    marqueur = new google.maps.Marker(optionsMarqueur); 
}

那么，在 google 地图脚本标签之前或之后添加 test.js 都没有关系。

How can I resolve "Uncaught ReferenceError: google is not defined"? (Google MAPS API)

How can I resolve "Uncaught ReferenceError: google is not defined"? (Google MAPS API)

javascript

undefined

google-maps-api-3

uncaught-exception