Why does loading a Google Map on my page resize everything on the page that uses the Roboto font?

Question

I cut all unrelated parts of my page out to narrow down the problem.

When the page initially loads, the title is the correct size, but when the map loads, it changes the size of the title. If I comment out the map div, the title remains the correct size.

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;
}

I tried setting the size of everything manually but it seems to override everything, including !important. The only thing that fixes is it not using Roboto font.

score 0 · Accepted Answer · answered May 13 '18 at 23:19

Google Maps uses Roboto for it’s fonts, and because it’s not an iframe the Roboto font stylesheet needs to be imported if the site isn’t using it. The problem with this is that it also imports the stylesheet even when the site already has Roboto. Not only that, but the stylesheet is injected at the top of the head, meaning that it will override whatever Roboto fonts the site is already using. In my case, I was using the font weight 900, which Google Maps doesn’t use. This meant that all my 900 weighted fonts would adjust down to 700 once the maps initialised.

I found this solution https://stackoverflow.com/a/35993046/2153273

The accepted answer no longer works, but there is a working solution a bit farther down. The direct link should take you to it.

Why does loading a Google Map on my page resize everything on the page that uses the Roboto font?

1 Answers1