Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/README.md

Last active January 31, 2019 06:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimizu/e71c2d26656e2cbbc8eddec940238d5e to your computer and use it in GitHub Desktop.
Save shimizu/e71c2d26656e2cbbc8eddec940238d5e to your computer and use it in GitHub Desktop.
Download ZIP
Custom style of Google Map does not apply to Korea
Raw
README.md

Google Map のカスタムスタイルが韓国の領土には反映されない。

韓国では国内法上の制約で、地図データを海外のデータセンターにエクスポートができない。 そのため、Gogle Maps APIで提供される一部の機能が動作しないとのこと。 （地図画像のスタイルを動的に変更する機能も含まれる）

参考： 구글 자바스크립트 style 한국 적용에 대해서 질문드립니다. - Google プロダクト フォーラム

Raw
index.html
<!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>
Raw
index.js
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment