So gestalten Sie den Teil "Unloaded Map" von Google Maps [Duplikat]
Ich versuche, meine Google Map mithilfe der API im dunklen Modus zu gestalten.
Ich habe dieses Beispiel gefunden und es funktioniert gut. Das Problem ist jedoch, dass, wenn ich schnell durch die Karte scrolle, die Teile der Karte, die noch nicht geladen wurden, eine hellgraue Farbe haben, was den Zweck des Dunkelmodus, nicht viel Licht auszulöschen, völlig zunichte macht.
Meine erste Annahme war, dass ich nur einen "elementType" hinzufügen muss, der entladenen Kacheln entspricht. Aber dann habe ich diese Seite gefunden, die nicht hilft, obwohl sie besagt, dass ich "alle" Funktionen auswählen kann. Aber wenn ich das mache, hat das keinen Einfluss auf die Farbe entladener Kartenkacheln.
Wie kann ich Google Maps veranlassen, die Farbe der entladenen Kacheln zu ändern?
Antworten
Ich glaube, Sie suchen die MapOption : backgroundColor :
backgroundColor optional
Typ: string optional
Farbe, die für den Hintergrund des Map div verwendet wird. Diese Farbe wird sichtbar, wenn die Kacheln noch nicht geladen wurden, während der Benutzer schwenkt. Diese Option kann nur eingestellt werden, wenn die Karte initialisiert wird.
Etwas wie:
backgroundColor: "black",
Proof-of-Concept-Geige

Code-Auszug:
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>