Как я могу решить Uncaught ReferenceError: Google не определен? (API Google MAPS)

У меня есть проект, который состоит в отображении карты Google с информацией, связанной с городскими местами (достопримечательности, такие как школа, ресторан, метро и т. д.). Но сначала мне нужно научиться использовать API.

Мне трудно отобразить простой маркер, действительно, у меня есть «Uncaught ReferenceError: google не определен» в консоли Chrome, и маркер не появляется. Я искал везде на форуме, но ничего не помогло мне.

Я предоставляю вам мой небольшой 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);

javascript google-maps-api-3 undefined uncaught-exception
person m.planchon    schedule 10.05.2016    source источник
comment
Переместите свой скрипт так, чтобы он был после включения скрипта Google.   -  person Reinstate Monica Cellio    schedule 10.05.2016

Ответы (3)


arrow_upward
3
arrow_downward

Карты 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); 
}

Тогда не имеет значения, включаете ли вы test.js до или после тега скрипта Google Maps.

person Adam    schedule 10.05.2016
comment
Большое спасибо, это работает! Я трачу на это целый день :/ Я считаю, что мне предстоит пройти долгий путь, прежде чем я стану профессионалом в Google Maps ^^ - person m.planchon; 10.05.2016

arrow_upward
1
arrow_downward

Вам необходимо загрузить googleapis перед загрузкой тестового кода.

edit: Можете ли вы переместить их и в голову?

<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 делают две разные вещи, вы не должны помещать их в один и тот же тег script.

async загружает файл во время синтаксического анализа HTML и приостанавливает синтаксический анализатор HTML, чтобы выполнить его, когда он закончит загрузку.

defer загружает файл во время синтаксического анализа HTML и выполняет его только после завершения синтаксического анализа.

person Tipster74743    schedule 10.05.2016
comment
Спасибо за быстрый ответ :) Я попробовал то, что вы сказали, но это не работает - person m.planchon; 10.05.2016
comment
Вы добавили отсрочку в скрипт test.js и удалили асинхронность из скрипта googleapis? Вам не нужно делать асинхронный И откладывать один и тот же тег скрипта, они делают разные вещи. - person Tipster74743; 10.05.2016
comment
Если я это сделаю, он скажет, что initMap() не является функцией, и у меня есть пустая страница. - person m.planchon; 10.05.2016

arrow_upward
0
arrow_downward

Вы используете атрибут asyn и defer:

  • async: загрузить асинхронный скрипт

  • отложить: выполнить в конце

но ваш test.js загружается и выполняется синхронно: до того, как google maps sdk, следовательно, google не определен

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

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

person Jules Goullee    schedule 10.05.2016
comment
Спасибо за быстрый ответ :) Если я правильно понимаю, мне нужно просто переместить свой первый скрипт после второго. Но не работает, у меня такое же сообщение в консоли и маркер не появляется - person m.planchon; 10.05.2016
comment
двигаться после и добавить асинхронность и отложить в свой тег скрипта - person Jules Goullee; 10.05.2016
comment
Как это ? ‹скрипт асинхронной отсрочки src=maps.googleapis.com/ maps/api/› ‹script async defer type=text/javascript src=test.js›‹/script› - person m.planchon; 10.05.2016