Почему мой маркер Google Maps не отображается?
Почему я не могу добавить маркер на Google Maps на свою страницу? Я работаю с API Карт Google. Я не знаю, в чем проблема. Вот мой код:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=API&callback=initMap" ></script>
</head>
<body>
<div class = "location"style = "height: 300px; width: 600px;"></div>
<script>
let loc = document.querySelector(".location");
window.onload=loadMap
function loadMap(){
const myLatLng = { lat: 50.488057309872424, lng: 30.47287431851951 };
let options = {
center:myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
let map=new google.maps.Map(loc,options)
let marker= new google.maps.Marker({
positon: myLatLng,
map:map,
title: "Это ВЫ!"
});
}
</script>
</body>
</html>
Я прочитал документацию Google, но не могу найти свою ошибку.
Пожалуйста, предоставьте минимальный воспроизводимый пример, позволяющий воспроизвести проблему. Где твой HTML? CSS? + ваш JS неполный.
@ Профессор Абронсиус, о, хорошо. Я исправил это, но моя проблема все еще здесь (
@MrUpsidown, я обновляю свои вопросы и добавляю html
Твоя стихия div томится где-то в ничейной земле. Любой элемент содержимого, например DIV, должен находиться в теле. Кроме того, поскольку вы вызываете initMap внутри скрипта uri, вам не нужно явно вызывать его в window.onload=initmap
Я считаю, что причина того, что ваш маркер не отображается, заключается в опечатке. Это должно быть position, а не positon
Вы должны ограничить свой ключ API. Любой может использовать его сейчас...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Исправленный пример, который будет отображать маркер после использования правильного апикея. Проблема заключалась в неправильном написании position... также было удалено window.onload=loadMap, поскольку оно было избыточным при использовании параметра callback в URL-адресе скрипта. Добавление async и defer к URL-адресу скрипта должно помочь убедиться, что dom загружен, прежде чем пытаться запустить код javascript.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.location {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class = "location"></div>
<script>
function loadMap() {
const myLatLng = {
lat: 50.488057309872424,
lng: 30.47287431851951
};
let options = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
let map = new google.maps.Map(document.querySelector(".location"), options);
let marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ""
})
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=loadMap'></script>
</body>
</html>@MrUpsidown .. спасибо за ТАКОЙ апикей, не знал, что он существует!
window.onload=loadMap()должно бытьwindow.onload=loadMap- добавление()немедленно вызовет функцию.