Множественное местоположение в Google Map API не работает
Я использую Google MAP API для отображения нескольких местоположений на карте Google, я также сгенерировал ключ, но когда я запускаю этот код, он дает мне ошибку
uncaught exception: InvalidValueError: myMap is not a function.
Я что-то сделал неправильно? Любой момент, почему я получаю эту ошибку
Введите код ниже, взятый из w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<!-- <script src = "http://maps.google.com/maps/api/js?sensor=false" type = "text/javascript"></script> -->
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type = "text/javascript"></script>
</head>
<body>
<div id = "map" style = "width: 500px; height: 400px;"></div>
<script type = "text/javascript">
function myMap() {
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</body>
</html>
ОБНОВИТЬ
и если я использую этот учебник с моим API_KEY, он работает, но отображается только для версии для разработки. https://github.com/taniarascia/googlemaps
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны переместить эту линию
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type = "text/javascript"></script>
после вашей функции myMap. Вы можете поместить его как последний элемент в теге <body></body>.
Или, вы можете оставить его там, где он есть, удалить callback=myMap из вызова API и вызвать его вручную в своем скрипте.
Также есть большая вероятность, что вы не сможете использовать этот ключ. Не используйте ключ (вы получите карту «только для целей разработки») и не создавайте свой собственный ключ в консоли разработчика.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
</head>
<body>
<div id = "map" style = "width: 500px; height: 400px;"></div>
<script type = "text/javascript">
function myMap() {
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&callback=myMap" type = "text/javascript"></script>
</body>
</html>Это был быстрый отказ за рабочее решение. Как это у вас "не работает"? Позвольте мне обновить свой ответ рабочим кодом ...
@MrUpsidedown, я не голосовал против, даже мой вопрос тоже был отвергнут. Ненавижу, когда люди голосуют против без каких-либо подробностей .. Как мы можем тогда улучшить, если мы не видим причин для отрицательного голосования .. Цените любого, кто хотя бы ответит или попытается помочь ..
Неважно. Смотрите мой обновленный ответ. Перемещение той строки, где я сказал (и удаление ключа), устранило проблемы.
Я сгенерировал свой собственный ключ даже тогда, когда я получаю только цель разработки. Я попробую еще раз написать код ..
Хорошо, но это другая проблема, чем та, которую вы описали в своем исходном вопросе. Когда вы сгенерировали этот ключ? Вы должны подождать несколько минут, чтобы ключ можно было использовать. Вы также создали учетную запись для этого ключа и т. д.?
Я использовал свой ключ в реальном коде, для этого вопроса я использовал образец ключа с сайта w3schools.com ..
Конечно, но проблема, которую вы описали, была uncaught exception: InvalidValueError: myMap is not a function, которая исправлена для меня с помощью кода, который я опубликовал. Теперь, если ваш ключ не работает, это другая проблема. Я предлагаю вам прочитать это руководство и убедиться, что вы все сделали правильно.
Я создал новый ключ, и я все еще получаю его только для целей разработки.
Вы продолжаете задавать вопросы, но почти никогда не принимаете и не голосуете за любой полученный ответ. Вы поняли, как работает этот сайт?