Google Map のカスタムスタイルが韓国の領土には反映されない。
韓国では国内法上の制約で、地図データを海外のデータセンターにエクスポートができない。 そのため、Gogle Maps APIで提供される一部の機能が動作しないとのこと。 （地図画像のスタイルを動的に変更する機能も含まれる）
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{
visibility: 'on'
}
]
},
{
featureType: 'all',
elementType: 'labels',
stylers: [
{
visibility: 'off'
},
{
saturation: '-100'
}
]
},
{
featureType: 'all',
elementType: 'labels.text.fill',
stylers: [
{
saturation: 36
},
{
color: '#000000'
},
{
lightness: 40
},
{
visibility: 'off'
}
]
},
{
featureType: 'all',
elementType: 'labels.text.stroke',
stylers: [
{
visibility: 'off'
},
{
color: '#000000'
},
{
lightness: 16
}
]
},
{
featureType: 'all',
elementType: 'labels.icon',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'administrative',
elementType: 'geometry.fill',
stylers: [
{
color: '#000000'
},
{
lightness: 20
}
]
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [
{
color: '#000000'
},
{
lightness: 17
},
{
weight: 1.2
}
]
},
{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{
color: '#000000'
},
{
lightness: 20
}
]
},
{
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [
{
color: '#4d6059'
}
]
},
{
featureType: 'landscape',
elementType: 'geometry.stroke',
stylers: [
{
color: '#4d6059'
}
]
},
{
featureType: 'landscape.natural',
elementType: 'geometry.fill',
stylers: [
{
color: '#4d6059'
}
]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{
lightness: 21
}
]
},
{
featureType: 'poi',
elementType: 'geometry.fill',
stylers: [
{
color: '#4d6059'
}
]
},
{
featureType: 'poi',
elementType: 'geometry.stroke',
stylers: [
{
color: '#4d6059'
}
]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{
visibility: 'on'
},
{
color: '#7f8d89'
}
]
},
{
featureType: 'road',
elementType: 'geometry.fill',
stylers: [
{
color: '#7f8d89'
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{
color: '#7f8d89'
},
{
lightness: 17
}
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{
color: '#7f8d89'
},
{
lightness: 29
},
{
weight: 0.2
}
]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [
{
color: '#000000'
},
{
lightness: 18
}
]
},
{
featureType: 'road.arterial',
elementType: 'geometry.fill',
stylers: [
{
color: '#7f8d89'
}
]
},
{
featureType: 'road.arterial',
elementType: 'geometry.stroke',
stylers: [
{
color: '#7f8d89'
}
]
},
{
featureType: 'road.local',
elementType: 'geometry',
stylers: [
{
color: '#000000'
},
{
lightness: 16
}
]
},
{
featureType: 'road.local',
elementType: 'geometry.fill',
stylers: [
{
color: '#7f8d89'
}
]
},
{
featureType: 'road.local',
elementType: 'geometry.stroke',
stylers: [
{
color: '#7f8d89'
}
]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [
{
color: '#000000'
},
{
lightness: 19
}
]
},
{
featureType: 'water',
elementType: 'all',
stylers: [
{
color: '#2b3638'
},
{
visibility: 'on'
}
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{
color: '#2b3638'
},
{
lightness: 17
}
]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{
color: '#24282b'
}
]
},
{
featureType: 'water',
elementType: 'geometry.stroke',
stylers: [
{
color: '#24282b'
}
]
},
{
featureType: 'water',
elementType: 'labels',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'water',
elementType: 'labels.text',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
visibility: 'off'
}
]
},
{
featureType: 'water',
elementType: 'labels.icon',
stylers: [
{
visibility: 'off'
}
]
}
];
function initMap() {
// Styles a map in night mode.
map = new google.maps.Map(document.getElementById('map'), {
styles: style
});
var Item_1 = new google.maps.LatLng(34.05993871652742, 122.18000918045175);
var myPlace = new google.maps.LatLng(38.48627249793371, 132.94661074295175);
var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);
setTimeout(function() {
if (map.getZoom() < 7) map.setZoom(7);
}, 100);
}
<!DOCTYPE html>
<html>
<head>
<title>Styled Maps - Night Mode</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8X-e3Naz_Pu50cP8bdDQUZukKrXMqDGs&callback=initMap"
async defer></script>
<script src="index.js"></script>
</body>
</html>