Googleマップの「アンロードされた地図」部分のスタイルを設定する方法[複製]
Dec 14 2020
APIを使用してGoogleマップをダークモードでスタイル設定しようとしています。
私はこの例を見つけました、そしてそれはうまく働きます。しかし、問題は、マップをすばやくスクロールすると、まだロードされていないマップの部分が薄い灰色になり、あまり光を出さないというダークモードの目的を完全に無効にすることです。
私の最初の仮定は、アンロードされたタイルに対応する「elementType」を追加する必要があるということでした。しかし、「すべての」機能を選択できると表示されているにもかかわらず、役に立たないこのページを見つけました。しかし、これを行っても、アンロードされたマップタイルの色には影響しません。
Googleマップにアンロードされたタイルの色を変更させるにはどうすればよいですか？
回答
1 geocodezip Dec 14 2020 at 09:01
私はあなたがMapOptionを探していると信じています：backgroundColor：
backgroundColor オプション
タイプ：文字列オプション
マップdivの背景に使用される色。この色は、ユーザーがパンするときにタイルがまだロードされていない場合に表示されます。このオプションは、マップが初期化されている場合にのみ設定できます。
何かのようなもの：
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>