Google Maps Javascript API无法可靠加载 [英] Google Maps Javascript API not loading reliably
问题描述
我有一个页面显示google map，但是该页面不能始终如一地加载地图，尤其是从另一个页面的href导航到该页面时.我在台式机和Android上的Chrome上运行它，并且该问题在两个平台上仍然存在.
I have a page which displays a google map however the page does not consistently load the map especially when navigating to the page from an href in another page. I am running it on Chrome on Desktop and on Android and the problem is persistent on both platforms.
在调用脚本后，我试图删除异步并加载api，但这并没有帮助解决一致性问题.
I've tried to remove the async and loading the api after I call my script however it has not helped to solve the consistency.
这是我的HTML文件，其中删除了我的API密钥
This is my HTML file with my API key removed
<!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文件
This is my Javascript file
$(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上: https://michaeldiacono-e9629.firebaseapp.com/
The website is live on this url: https://michaeldiacono-e9629.firebaseapp.com/
推荐答案
您遇到此错误:
未被捕获(承诺)"initMap不是函数"
Uncaught (in promise) "initMap is not a function"
因为您的 initMap 函数的作用域位于jquery的document.ready中，所以您正在异步调用一个从未发现的全局函数，因为它实际上不是全局定义的.该方法仅会执行(因此，地图确实会加载大多数时间)，因为您是在jquery文档中的onload dom侦听器中再次调用该方法的.
Because your initMap function is scoped within jquery's document.ready so you are asynchronously calling a global function that is never found as it's in fact not globally defined. The method only gets executed (and hence your map does load most times) because you call it again in your onload dom listener inside jquery's document.ready.
您可以通过多种方式解决此问题，例如通过将此方法放在全局范围内，同步加载Maps API，延迟加载...最推荐的方法是使用回调.
You can fix this in multiple ways, e.g. by placing this method in global scope, loading the Maps API synchronously, lazy loading it... Most recommended approach is to use a callback.
查看相关线程:
> Google Maps API无法找到定义的回调在$(document).ready 中
移动Google将api代码映射到单独的文件+ jquery
希望这对您有所帮助.
这篇关于Google Maps Javascript API无法可靠加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
