blog - Google Maps APIのMap styleの変更
Google Maps APIのMap featuresは、道路、景色、ビルなど地図上の要素で、これらを指定して、地図のスタイルやデザインを変えることができる。
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeStyleFeatureType
これらのstyleを個別に指定するには、Stylersのcolor, hue, saturationなどの要素をMap featureごとに指定すればよい。
以下の例は、stylesをグローバルにJSON形式で定義し、paintRoad()とpaintLandscape()という関数で、colorを別個に指定している。
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeStyleFeatureType
これらのstyleを個別に指定するには、Stylersのcolor, hue, saturationなどの要素をMap featureごとに指定すればよい。
以下の例は、stylesをグローバルにJSON形式で定義し、paintRoad()とpaintLandscape()という関数で、colorを別個に指定している。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 10px; padding: 10px }
#map_canvas { height: 100% }
</style>
<title>Google Maps API Styled Maps サンプル</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var latlng_koogei = new google.maps.LatLng(35.463536,139.32945);
// stylesをグローバルで定義
var styles = [
{
featureType: "road",
elementType: "geometry",
stylers: [
{ color: "" },
]
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{ color: "" },
]
}
];
function initialize() {
//地図の設定
var opts = {
zoom: 15,
center: latlng_koogei,
mapTypeId: google.maps.MapTypeId.ROADMAP
//mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}// initialize()の最後
function paintRoad() {
var value = document.getElementById("mapcolor1").value;
styles[0].stylers[0].color = value;
map.setOptions({styles: styles});
}
function paintLandscape() {
var value = document.getElementById("mapcolor2").value;
styles[1].stylers[0].color = value;
map.setOptions({styles: styles});
}
//]]>
</script>
</head>
<body onLoad="initialize()">
<p>Google Maps API Geo Codingサンプル</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<div>
道路の色を#rrggbbで入力：
<input id="mapcolor1" type="textbox" value="#ff0000">
<input type="button" value="Paint" onclick="paintRoad()">
</div>
<div>
景色の色を#rrggbbで入力：
<input id="mapcolor2" type="textbox" value="#00ff00">
<input type="button" value="Paint" onclick="paintLandscape()">
</div>
</body>
</html>