Search code examples
javascriptgoogle-maps-api-3undefineduncaught-exception

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

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