Comment styliser la partie "carte déchargée" de Google Maps [dupliquer]
J'essaie de styliser ma carte Google en mode sombre à l'aide de l'API.
J'ai trouvé cet exemple et cela fonctionne très bien. Mais le problème est que si je fais défiler la carte rapidement, les parties de la carte qui ne sont pas encore chargées sont de couleur gris clair, ce qui va complètement à l'encontre de l'objectif du mode sombre de ne pas éteindre beaucoup de lumière.
Ma première hypothèse était que je devais juste ajouter un "elementType" correspondant aux tuiles déchargées. Mais j'ai trouvé cette page qui n'aide pas, même si elle dit que je peux sélectionner "toutes" les fonctionnalités. Mais quand je fais cela, cela n'affecte pas la couleur des tuiles de carte déchargées.
Comment puis-je faire en sorte que Google Maps modifie la couleur des tuiles déchargées?
Réponses
Je crois que vous recherchez le MapOption : backgroundColor :
backgroundColor facultatif
Type: string facultatif
Couleur utilisée pour l'arrière-plan de la div Map. Cette couleur sera visible lorsque les tuiles ne sont pas encore chargées lorsque l'utilisateur effectue un panoramique. Cette option ne peut être définie que lorsque la carte est initialisée.
Quelque chose comme:
backgroundColor: "black",
preuve de concept violon

extrait de code:
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>