К сожалению! Что-то пошло не так. Эта страница не загружала Google Maps правильно. Смотрите консоль JavaScript для технических деталей.
я не знаю почему
Ошибка API: RefererNotAllowedMapError
& Лт;!- начать фрагмент: js hide: ложная консоль: true - >
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
async defer></script>
</body>
</html>
& Лт;!- конец фрагмента - >
Пожалуйста, посмотрите на руководство по Google Maps Api: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map
При внимательном чтении вы увидите, что нужен ключ, YOUR_API_KEY
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Чтобы получить свой ключ, перейдите по ссылке: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key
У меня была та же проблема, пытаясь использовать API Карт Google. Получил то же сообщение, чтобы перейти в консоль JavaScript. Какая трата времени!
В моем случае проблема заключалась в том, что я неправильно исказил доменное имя (реферер) при получении ключа API браузера от Google.
Исправление имени ссылающегося домена (http://phystutor.com/*) на сайте Google API решило проблему для меня.
Замените плагин googleApi maps этим...
"https://maps.googleapis.com/maps/api/js?sensor = false & callback = initMap "
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html>
& Лт;!- конец фрагмента - >
Надеюсь, это работает для вас.
У меня была та же проблема, когда я работал с сайтом на новом хосте со страницей, которая включала встроенную карту, которой ранее не было на сайте. Карта работала на моем сайте разработки, так что это было для меня сюрпризом.
Если вы попали на эту страницу, выполнив поиск в Google, вам нужно начать здесь: https://developers.google.com/maps/documentation/javascript/get-api-key.
Если вы хотите прочитать объявление о ключевом требовании API, прочитайте следующее: https://googlegeodecvelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html
Также обратите внимание, что в моем случае "& callback = initMap
" вызвал ошибку.
Вы можете обратиться к документации Карт Google для различных кодов ошибок здесь: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
Вышеуказанный код ошибки описан в документации как ниже:
Текущий URL-адрес загрузки Google Maps JavaScript API не был добавлен в список разрешенных рефереров. Пожалуйста, проверьте реферер настройки вашего ключа API на консоли Google API.
Пожалуйста, проверьте ссылку на документацию карт для сообщений об ошибках для более подробной информации.
Google Maps теперь требует использования ключа API Карт Google для отображения карты на вашем сайте в соответствии с этой статьей: https://googlegeodecvelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
async defer></script>
</body>
</html>
& Лт;!- конец фрагмента - >