我有一个显示谷歌地图的页面，但是该页面不会始终如一地加载地图，尤其是在从另一个页面中的href导航到该页面时。我在桌面和Android上的Chrome上运行它，并且在两个平台上都存在问题。
我试图在调用脚本后删除异步并加载 api，但它无助于解决一致性问题。
这是我的 HTML 文件，删除了我的 API 密钥
<!DOCTYPE html>
<html lang="en">
<head>
<title>Locations</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg fixed-top ">
<!--Collapse button-->
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#main-navigation"
aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bolder" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bolder" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bolder" href="#">Gallery</a>
</li>
</ul>
</div>
</nav>
<div id="map-container" class="map-container">
</div>
<script src="../jquery-3.4.1.js"></script>
<script src="../bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="js/js.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=**I PUT MY KEY HERE**&callback=initMap" defer></script>
</body>
</html>
这是我的Javascript文件
$(function () {
function initMap() {
var center = new google.maps.LatLng(35.898541, 14.451447);
var giuseppis = new google.maps.LatLng(35.948172, 14.428273);
var rubino = new google.maps.LatLng(35.899200, 14.512016);
var mezzodi = new google.maps.LatLng(35.896713, 14.510441);
var mapCanvas = document.getElementById('map-container');
var mapOptions = {
center: center,
zoom: 12,
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
],
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var markerImage = '../assets/marker.png';
var marker = new google.maps.Marker({
position: giuseppis,
map: map,
});
var marker2 = new google.maps.Marker({
position: rubino,
map: map,
});
var marker3 = new google.maps.Marker({
position: mezzodi,
map: map,
});
var contentString = '<div class="info-window">' +
'<h3>Giuseppi's Bar & Bistro</h3>' +
'<div class="info-content">' +
'<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
'</div>' +
'</div>';
var contentString2 = '<div class="info-window">' +
'<h3>Rubino</h3>' +
'<div class="info-content">' +
'<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
'</div>' +
'</div>';
var contentString3 = '<div class="info-window">' +
'<h3>Mezzodi</h3>' +
'<div class="info-content">' +
'<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
'</div>' +
'</div>';
var infoWindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var infoWindow2 = new google.maps.InfoWindow({
content: contentString2,
maxWidth: 400
});
var infoWindow3 = new google.maps.InfoWindow({
content: contentString3,
maxWidth: 400
});
marker3.addListener('click', function () {
infoWindow3.open(map, marker3);
});
marker2.addListener('click', function () {
infoWindow2.open(map, marker2);
});
marker.addListener('click', function () {
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initMap());
$(document).bind("projectLoadComplete", initialize);
});
该网站位于此网址上：https://michaeldiacono-e9629.firebaseapp.com/
您收到此错误：
未捕获(承诺("initMap 不是一个函数">
因为你的initMap函数的作用域在jquery的document.ready内，所以你异步调用了一个从未找到的全局函数，因为它实际上不是全局定义的。该方法只被执行(因此你的map大多数时候都会加载(，因为你在jquery的document.ready中的onload dom监听器中再次调用它。
您可以通过多种方式解决此问题，例如，通过将此方法置于全局范围内，同步加载 Maps API，延迟加载它......最推荐的方法是使用回调。
查看相关主题：
Google 地图 API 找不到 $(document(.ready 中定义的回调
将谷歌地图 API 代码移动到单独的文件 + jquery
希望这对你有帮助。