I'm trying to set a background colour on a map that is using cloud based styling, however when you zoom out (and as you are loading the map), the background colour is not used, rather a beige colour is. Looking through the options in the map styler there isn't a way to set this colour either.
The following is a snippet that demonstrates this.
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8,
mapId: '276ae3a2ab869cb2',
backgroundColor: 'black'
});
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<!-- Source: https://developers.google.com/maps/documentation/javascript/overview -->
<html>
<head>
<title>Simple Map</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async></script>
</body>
</html>