Я вырезал все несвязанные части моей страницы, чтобы сузить проблему.
Когда страница изначально загружается, заголовок имеет правильный размер, но когда загружается карта, он меняет размер заголовка,Если я закомментирую div карты, заголовок останется правильного размера.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="navbar">
<h2>Title</h2>
</div>
<div class="mainContent">
<div id="map"></div>
</div>
</body>
<script src="map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
</html>
map.js
var map = null;
function initMap() {
var location = {lat: 37.421842, lng: -122.084119};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: location
});
}
stylesheet.css
#map {
height: 350px;
width: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
#navbar {
background-color: gray;
}
.mainContent {
margin: 20px;
}
Я попытался установить размер всего вручную, но кажется, что он переопределяет все, включая! Важный.Единственное, что исправляет это то, что он не использует шрифт Roboto.