Javascript 我如何解决；未捕获的引用错误：未定义谷歌"；？（谷歌地图API）_Javascript_Google Maps Api 3_Undefined_Uncaught Exception

Javascript 我如何解决；未捕获的引用错误：未定义谷歌"；？（谷歌地图API）

javascript google-maps-api-3

Javascript 我如何解决；未捕获的引用错误：未定义谷歌"；？（谷歌地图API）,javascript,google-maps-api-3,undefined,uncaught-exception,Javascript,Google Maps Api 3,Undefined,Uncaught Exception,我有一个项目，其中包括显示一个谷歌地图的信息与城市的地方（兴趣点，如学校，餐厅，地铁，…）但我必须先学会使用API 我很难显示一个简单的标记，事实上，我在Chrome控制台中有“UncaughtReferenceError:google未定义”，并且标记没有出现。我在论坛上到处搜索，但没有任何帮助我提供我的小HTML代码： <!DOCTYPE html> <html> <head> </head> <body> &

我有一个项目，其中包括显示一个谷歌地图的信息与城市的地方（兴趣点，如学校，餐厅，地铁，…）但我必须先学会使用API

我很难显示一个简单的标记，事实上，我在Chrome控制台中有“UncaughtReferenceError:google未定义”，并且标记没有出现。我在论坛上到处搜索，但没有任何帮助

我提供我的小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>

您需要在加载测试代码之前加载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解析过程中下载文件，并仅在解析完成后执行。

您需要在加载测试代码之前加载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解析器以执行该文件

“延迟”在HTML解析过程中下载文件，并且仅在解析完成后执行该文件。

您使用asyn和“延迟”属性：

异步：加载异步脚本
推迟：最后执行

但是您的test.js是load and exec Synchronus：在google maps sdk之前因此，谷歌没有定义

您使用asyn和defer属性：

异步：加载异步脚本
推迟：最后执行

但是您的test.js是load and exec Synchronus：在google maps sdk之前因此，谷歌没有定义

谷歌地图是异步加载的

，

——即使您直接包含脚本标记。因此，在回调（您已指定为

initMap

）之前，不要使用任何

google.maps

类（如

google.maps.Marker

）

修改

test.js

以便在

initMap

回调中创建标记

您还使用了

maCarte

，而它仍然

未定义。因此，您只需在创建标记后将标记添加到地图（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 maps脚本标记之前或之后是否包含test.js
并不重要。
google maps异步加载，即使直接包含脚本标记。因此，在回调（您已指定为initMap
）之前，不要使用任何google.maps
类（如google.maps.Marker
）
修改test.js
以便在initMap
回调中创建标记
您还使用了maCarte
，而它仍然未定义。因此，您只需在创建标记后将标记添加到地图（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 maps脚本标记之前还是之后包含test.js
，都无所谓。
移动您的脚本include，使其位于google脚本include之后。移动您的脚本include，使其位于google脚本include之后。感谢您的快速响应：）我尝试了您所说的内容，但它不起作用。您添加的脚本延迟到test.js脚本并从googleapis脚本中删除async？您不需要在同一个脚本标记上执行async和defer，它们可以执行不同的操作。如果我这样做，它会说“initMap（）”不是一个函数，我有一个空白页面感谢您的快速响应：）我尝试了您所说的，但它不起作用。您是否将defer添加到test.js脚本中，并从googleapis脚本中删除async？您不需要在同一个脚本标记上执行异步和延迟，它们执行不同的操作。如果我这样做，它会说“initMap（）”不是一个函数，我有一个空白页面感谢您的快速响应：）如果我理解得很好，我只需将第一个脚本移到第二个脚本之后。但它不起作用，我在控制台中有相同的消息，并且marker在之后不显示，并且像这样将async和defer添加到脚本标记中？感谢您的快速回复：）如果我理解得很好，我只需将第一个脚本移到第二个脚本之后。但它不起作用，我在控制台中有相同的消息，并且marker在之后不显示，并且像这样将async和defer添加到脚本标记中？非常感谢，它很有效！我每天都在做这件事：/我相信在我成为谷歌地图的专业人士之前还有很长的路要走^^非常感谢，这很有效！我每天都在做这件事：我相信要成为谷歌地图的专业人士还有很长的路要走^^