Google Map のカスタムスタイルが韓国の領土には反映されない。
韓国では国内法上の制約で、地図データを海外のデータセンターにエクスポートができない。 そのため、Gogle Maps APIで提供される一部の機能が動作しないとのこと。 (地図画像のスタイルを動的に変更する機能も含まれる)
Google Map のカスタムスタイルが韓国の領土には反映されない。
韓国では国内法上の制約で、地図データを海外のデータセンターにエクスポートができない。 そのため、Gogle Maps APIで提供される一部の機能が動作しないとのこと。 (地図画像のスタイルを動的に変更する機能も含まれる)
<!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> |
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); | |
} |