Моя карта Google не будет отображаться в chrome после просмотра видеоурока, нужна помощь.
Привет,
Google Maps JavaScript API Tutorial - YouTube[^]
Я следовал видео-учебнику выше, который называется "
Google Maps JavaScript API Tutorial".
Моя проблема заключается в том, что когда я компилирую его в chrome, он отображает название, которое я установил, но не саму карту google с маркерами.
Вот этот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Arduino Smart Stick Location Map</title>
<style>
#map{
height:400px;
width:100%;
}
</style>
</head>
<body>
<h1>Arduino Smart Stick Location Map</h1>
<div id="map"></div>
<script>
function initMap(){
// Map options
var options = {
zoom:10,
center:{lat:53.4808,lng:-2.2426}
}
// New map
var map = new google.maps.Map(document.getElementById('map'), options);
// Listen for click on map
google.maps.event.addListener(map, 'click', function(event){
// Add marker
addMarker({coords:event.latLng});
});
/*
//Add marker
var marker = new google.maps.Marker({
position:{lat:53.4808,lng:-2.2426},
map:map,
icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
var infoWindow = new google.maps.InfoWindow({
content:'<h1>Lynn MA</h1>'
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
*/
// Array of markers
var markers = [
{
coords:{lat:53.470912,lng:-2.241365},
iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content:'<h1>John Dalton East Carpark</h1>'
},
{
coords:{lat:53.471740,lng:-2.240842},
content:'<h1>John Dalton East Tower</h1>'
},
{
coords:{lat:53.472499,lng:-2.240830}
content:'<h1>John Dalton Foods</h1>'
},
{
coords:{lat:53.470493,lng:-2.238513}
content:'<h1>AllSaints Park</h1>'
},
{
coords:{lat:53.442371,lng:-2.201845}
content:'<h1>My Home</h1>'
}
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4mOCKmQe-ZovpqDeyvmTnrTK2Spcewzo-4M&callback=initMap">
</script>
</body>
</html>
Почему отображается только заголовок, а не карта с маркерами, и как я могу решить эту проблему ?
Что я уже пробовал:
YouTube Tutorials, форум Stackoverflow и учебники по javascript
ZurdoDev
Я бы посоветовал заглянуть в консоль инструментов разработчика chrome, чтобы узнать, в чем заключается ошибка, если таковая имеется.
Richard MacCutchan
Вы спросили человека, который написал учебник?
Kornfeld Eliyahu Peter
Откройте встроенный отладчик и посмотрите на ошибки...
Например https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error