Como estilizar a parte do "mapa descarregado" do Google Maps [duplicado]
Estou tentando estilizar meu mapa do Google em modo escuro usando a API.
Encontrei este exemplo e funciona bem. Mas o problema é que, se eu rolar o mapa rapidamente, as partes do mapa que ainda não foram carregadas ficam com uma cor cinza claro, anulando completamente o propósito do modo escuro de não emitir muita luz.
Minha primeira suposição foi que eu só preciso adicionar um "elementType" correspondente aos blocos não carregados. Mas então encontrei esta página que não ajuda, embora diga que posso selecionar "todos" os recursos. Mas quando faço isso, não afeta a cor dos blocos de mapas descarregados.
Como posso fazer o Google Maps mudar a cor do bloco não carregado?
Respostas
Acredito que você esteja procurando pelo MapOption : backgroundColor :
backgroundColor opcional
Tipo: string opcional
Cor usada para o fundo do div do Mapa. Esta cor ficará visível quando os ladrilhos ainda não tiverem sido carregados enquanto o usuário faz movimentos panorâmicos. Esta opção só pode ser definida quando o mapa é inicializado.
Algo como:
backgroundColor: "black",
prova de conceito de violino

fragmento de código:
function initMap() {
// Styles a map in night mode.
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 0,
backgroundColor: "black",
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"
}],
},
],
});
}
/* 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>
<html>
<head>
<title>Styled Maps - Night Mode</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>