admin管理员组

文章数量:1321260

I have a project which consist in displaying a google map with informations related to the city places (points of interests, such as school, restaurant, subway, ...) But I've to learn to use the API first.

I've difficulties to display a simple marker, indeed I have "Uncaught ReferenceError: google is not defined" in Chrome console and marker doesn't appear. I searched everywhere in the forum but nothing helped me.

I provide you my little HTML code :

    <!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=";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>

Then, this is my Javascript code :

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

I have a project which consist in displaying a google map with informations related to the city places (points of interests, such as school, restaurant, subway, ...) But I've to learn to use the API first.

I've difficulties to display a simple marker, indeed I have "Uncaught ReferenceError: google is not defined" in Chrome console and marker doesn't appear. I searched everywhere in the forum but nothing helped me.

I provide you my little HTML code :

    <!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./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>

Then, this is my Javascript code :

    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);
  • javascript
  • google-maps-api-3
  • undefined
  • uncaught-exception
Share Improve this question edited Jun 14, 2016 at 12:42 geocodezip 161k14 gold badges226 silver badges255 bronze badges asked May 10, 2016 at 14:05 m.planchonm.planchon 11 gold badge1 silver badge4 bronze badges 1
  • 2 Move your script include so that it's after the google script include. – Reinstate Monica Cellio Commented May 10, 2016 at 14:06
Add a ment  | 

3 Answers 3

Reset to default 4

Google maps is loaded asynchronously - even when you include the script tag directly. So don't use any google.maps classes (like google.maps.Marker) until inside your callback (which you have specified to be initMap).

Modify test.js so your marker is created inside your initMap callback.

You were also using maCarte while it was still undefined. So you need to add your marker to the map (maCarte) only after you have created it:

    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); 
}

Then, it doesn't matter if you include test.js before or after your google maps script tag.

You need to load googleapis before you load your test code.

edit: Can you move these to the head as well?

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

Async and defer do two different things, you shouldn't put them in the same script tag.

async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.

defer downloads the file during HTML parsing and will only execute it after the parser has pleted.

You use asyn and defer attribute:

  • async: load asynchronous script

  • defer: excute at the end

but your test.js is load and exec synchrnous: before google maps sdk consequently google is not defined

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

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

本文标签：

版权声明：本文标题：javascript - How can I resolve &quot;Uncaught ReferenceError: google is not defined&quot;? (Google MAPS API) - Stack Ove 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742032433a2416699.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。