谷歌地图Javascript API加载不可靠
我有一个显示谷歌地图的页面，但是该页面不会一直加载地图，特别是当从另一个页面的href导航到该页面时。我在Chrome桌面和Android上运行它，这两种平台上的问题都存在 我尝试在调用脚本后删除异步并加载api，但这无助于解决一致性问题 这是删除了API密钥的HTML文件谷歌地图Javascript API加载不可靠,javascript,html,google-maps,Javascript,Html,Google Maps,我有一个显示谷歌地图的页面，但是该页面不会一直加载地图，特别是当从另一个页面的href导航到该页面时。我在Chrome桌面和Android上运行它，这两种平台上的问题都存在 我尝试在调用脚本后删除异步并加载api，但这无助于解决一致性问题 这是删除了API密钥的HTML文件 <!DOCTYPE html> <html lang="en"> <head> <title>Locations</title> <meta
<!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>
$(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);
});
该网站位于此url上：您收到以下错误： promise initMap中的Uncaught不是一个函数 因为initMap函数的作用域在jquery的document.ready中，所以您正在异步调用一个从未找到的全局函数，因为它实际上不是全局定义的。该方法只执行，因此您的映射加载次数最多，因为您在jquery的document.ready内的onload dom侦听器中再次调用它 您可以通过多种方式解决此问题，例如，将此方法置于全局范围内，同步加载Maps API，延迟加载它。。。最推荐的方法是使用回调 查看相关线程：
希望这能对您有所帮助。FWIW它在FF桌面上对我很好。在您的live页面上，我看到了未捕获的引用错误：google未在此行中定义：google.maps.event.AddDomainListenerWindow，“load”，initMap；