У меня есть страница, на которой отображается карта Google, однако страница не всегда загружает карту, особенно при переходе на страницу с href на другой странице.Я запускаю его на Chrome на рабочем столе и на Android, и проблема сохраняется на обеих платформах.
Я попытался удалить асинхронную загрузку и загрузить 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);
});
Сайт работает по этому URL:https://michaeldiacono -e9629.firebaseapp.com /