CODEWITHSUNDEEP
javascriptgoogle-maps-api-3undefineduncaught-exception
m.planchon
m.planchon

Reputation: 1

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

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

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

Upvotes: 0

Views: 14031

Answers (3)

Adam Jenkins
Adam Jenkins

Reputation: 55623

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.

Upvotes: 4

Tipster74743
Tipster74743

Reputation: 23

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.com/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 completed.

Upvotes: 1

Jules Goullee
Jules Goullee

Reputation: 591

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.com/tags/att_script_async.asp

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

Upvotes: 0

Related Questions