Неподготовленный referenceError google не определен

Пожалуйста, помогите мне отладить, почему Chrome не распознает Google. я получаю эту ошибку:
Неподготовленный referenceError google не определен

Uncaught ReferenceError: google is not defined

Я переехал сценарий API к вершине, терпят неудачу. Я скорректировал свой собственный код в соответствии с документацией Google, потерпит неудачу. Является ли Chrome причиной моей проблемы?

<!DOCTYPE html> 
<html> 
<head> 
    <title>weather map</title> 
    <style type="text/css"> 
    html, body { 
     margin: 0; 
    } 
    #map-canvas { 
     width: 100%; 
     height: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <h1>Map Test</h1> 
     <div id="map-canvas"> 
     </div> 
    </div> 

    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      google.maps.event.addDomListener(window, 'load', initMap); 
     }); 

     var map; 
     function initMap() {   
      map = new google.maps.Map(document.getElementById("map- canvas"), { 
       center: {lat: 29.423017, lng: -98.48527}, 
       zoom: 8, 
      }); 
     } 
    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap"> 
    </script> 
</body> 
</html>

источник

2015-10-16 Paula

Консоль сообщает, какая строка кода вызывает ошибку ссылки? –

попробуйте удалить «defer» из вашего тега скрипта. Отсрочка запрещает выполнение тега скрипта до тех пор, пока DOM не будет проанализирован. И так как ваша функция $ (document) .ready появляется перед тегом скрипта, она пытается выполнить сначала. Альтернативно переместите свой тег script для maps.googleapis выше функции $ (document) .ready. –

Vincent, он говорит, что эта строка является проблемой:
google.maps.event.addDomListener (окно, 'load', initMap); – Paula

Вы загружаете API Javascript Google Maps асинхронно. Вы не можете использовать какие-либо его методы до тех пор, пока не будет запущена функция initMap (обратный вызов).

working fiddle

фрагмент кода:

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById("map-canvas"), { 
 
    center: { 
 
     lat: 29.423017, 
 
     lng: -98.48527 
 
    }, 
 
    zoom: 8 
 
    }); 
 
}

html, 
 
body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script> 
 
<div id="container" style="height:100%; width:100%;"> 
 
    <h1>Map Test</h1> 
 
    <div id="map-canvas"></div> 
 
</div>

источник

2015-10-16 16:31:25 geocodezip

Вы не должны положить Google Maps событие в $(document).ready(); так window.load уже регистрирует слушателя событий и что должно быть достаточным.

Ваш тег сценария Google Maps также должен быть выше вашего кода JavaScript, а прослушиватель событий также должен перемещаться под функцией.

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_WAS_HERE_&callback=initMap"> 
</script> 

<script type="text/javascript"> 
    var map; 
    function initMap() {   
     map = new google.maps.Map(document.getElementById("map- canvas"), { 
      center: {lat: 29.423017, lng: -98.48527}, 
      zoom: 8, 
      }); 
     } 

    google.maps.event.addDomListener(window, 'load', initMap); 
</script>

В следующий раз вы должны прочитать документацию более тщательно.

источник

2015-10-16 16:42:10

Неподготовленный referenceError google не определен

ответ

Смежные вопросы