Карты Google не отображаются, HTML
В настоящее время я работаю над программой отслеживания IP-адресов, но у меня есть некоторые проблемы с функцией карт Google, я не могу заставить карту показывать или ставить маркер на местоположении IP. Может ли кто-нибудь указать мне правильное направление?
Вот код, который я использовал для карты, я взял его с собственного сайта Google.
<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=AIzaSyAnoX8LSgSg5-pRiF5_IzZ313VsNZzuo-4&callback=initMap"
async defer></script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы не добавили ключ API
Предупреждение Google Maps JavaScript API: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys mw.m @ util.js: 220 util.js:220 Предупреждение Google Maps JavaScript API: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
Я понятия не имею, почему в pastebin не было ключа API, у меня есть ключ API. Загрузил новую ссылку с моим ключом API.
/* Всегда задавайте высоту карты явно, чтобы определить размер элемента * div, содержащего карту. / #карта {высота: 100%; } / Необязательный: Заполняет окно образцом страницы. */ html, body { height: 100%; маржа: 0; заполнение: 0; } добавьте эти стили в свой html перейдите по этой ссылке pastebin
Чтобы показать карту, вам необходимо предоставить height.
Добавьте эту высоту в свой стиль для div с id map
#map {
height: 300px;
}
Обновлять:
если контейнер карты (с картой идентификатора) должен занимать 100% высоты тела HTML. Обратите внимание, что мы должны специально объявить эти проценты для и также.
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Здорово! вы можете прочитать в документации карты Google, что необходимо установить высоту, иначе карта не будет отображаться в div.
В моем случае div был похож на
<div id = "map" style = "height: 100%; width: 100%"></div>
но карта появилась только тогда, когда я явно добавил свойство position: absolute. Итак, результат был
<div id = "map" style = "height: 100%; width: 100%; position: absolute"></div>
и это работает.
Пожалуйста, прочитайте Как спросить и минимальный воспроизводимый пример. Код, относящийся к вашей проблеме, относится непосредственно к вашему вопросу (в текстовой форме и в правильном формате), а не только на внешнем сайте. Пожалуйста, отредактируйте соответственно.