Google Maps cloud based styling not using supplied background colour

1 year ago

#67710

RetractedRedacted

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>

javascript

google-maps-api-3

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs