我对编码和API一般都很陌生，并且使用另一个教程我已经设法获得了一个包含多个标记和信息窗口的地图。
当从本地来源预览时，地图呈现完美，但在上传到托管网站时显示空白。
是否有人能够对可能出现的问题给出任何见解？我在下面提供了我的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分：2)
我的网页（本地）出现两个javascript错误：
Uncaught ReferenceError: google is not defined "initMap is not a function" 第一个是因为您在脚本加载中使用async defer和callback=initMap（异步加载脚本）
第二个因为你没有initMap功能。
如果您同步加载脚本（删除async defer和回调参数），则可以解决这两个问题（尽管您可能想要调查Google建议异步加载脚本的原因，而不是在所有示例中都这样做。）< / p>
要做这个改变：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
要：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
将脚本include移动到文档的<head>。
一旦我这样做，我会收到另一个javascript错误：
Uncaught ReferenceError: $ is not defined
（因为你不包括JQuery，以及在文档的头部修复包含<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>的内容）
更新代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
答案 1 :(得分：0)
我认为问题在于代码引用了一个initMap回调函数，它在代码中根本不存在。一旦下载了所有必需的库，回调就会运行，因此下面的修改后的代码应该有所帮助。我还调整了AutoCenter函数，因为它生成了一个关于$未定义的错误 - 通常这是一个jQuery方法，但在上面的页面示例中没有jQuery代码/库。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta content="text/html">
<meta charset=UTF-8">
<title>Google Maps Multiple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 400px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var locations = [
['<h3>Bay of Islands</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.165034, 174.162854, 5],
['<h3>Whangarei</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -35.696121, 174.300132, 4],
['<h3>Mangawhai Heads</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.113032, 174.559536, 3],
['<h3>Auckland Hussies</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.852924, 174.750234, 2],
['<h3>Auckland</h3>' +
'<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>', -36.868273, 174.711450, 1]
];
function initMap(){
var AutoCenter=function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(mkr){
bounds.extend(mkr.position);
});
map.fitBounds(bounds);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(-40.9006, 174.8860),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
content:locations[i][0],
map: map
});
markers.push( marker );
google.maps.event.addListener( marker, 'click', function(event) {
infowindow.setContent( this.content );
infowindow.open( map, this );
}.bind( marker ) );
}
AutoCenter();
}
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyD3weurNK33fOlKCfokaTQWz6NKN7z8nT4&callback=initMap"></script>
</body>
</html>