Google मैप्स के "अनलोड्ड मैप" हिस्से को कैसे स्टाइल करें [डुप्लिकेट]

Question

मैं एपीआई का उपयोग करके अपने Google मानचित्र को अंधेरे मोड में स्टाइल करने की कोशिश कर रहा हूं।

मुझे यह उदाहरण मिला और यह ठीक काम करता है। लेकिन समस्या यह है, अगर मैं मानचित्र को जल्दी से स्क्रॉल करता हूं, तो नक्शे के अंश जो अभी तक लोड नहीं किए गए हैं, एक हल्के भूरे रंग के होते हैं, पूरी तरह से अंधेरे मोड के उद्देश्य को हराकर ज्यादा रोशनी नहीं डालते हैं।

मेरी पहली धारणा यह थी कि मुझे अनलोड टाइल्स के अनुरूप "एलिमेंट टाइप" जोड़ने की जरूरत है। लेकिन फिर मुझे यह पृष्ठ मिला जो मदद नहीं करता है, हालांकि यह कहता है कि मैं "सभी" सुविधाओं का चयन कर सकता हूं। लेकिन जब मैं ऐसा करता हूं तो यह बिना मानचित्र वाले टाइलों के रंग को प्रभावित नहीं करता है।

मैं Google मानचित्र को अनलोड किए गए टाइल के रंग को कैसे बदल सकता हूं?

Answer 1

मेरा मानना है कि आप देख रहे हैं MapOption : पृष्ठभूमि रंग :

backgroundColor वैकल्पिक
प्रकार: मैप डिव की पृष्ठभूमि के लिए प्रयुक्त स्ट्रिंग वैकल्पिक
रंग। यह रंग तब दिखाई देगा जब टाइलें अभी तक उपयोगकर्ता के पैन के रूप में लोड नहीं हुई हैं। यह विकल्प केवल तब सेट किया जा सकता है जब मानचित्र आरम्भिक हो।

कुछ इस तरह:

backgroundColor: "black",

अवधारणा फिडेल का प्रमाण

सांकेतिक टुकड़ा:

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>