blog - Google Maps APIのMap styleの変更

Google Maps APIのMap styleの変更

カテゴリ : 
コンピュータ » プログラミング
執筆 : 
kuha 2012-10-26 20:30
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を別個に指定している。

<!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>

トラックバック

トラックバックpingアドレス http://www.kuhalabo.net/kxoops/modules/d3blog/tb.php/107
カレンダー
« « 2021 9月 » »
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
スポンサードリンク
検索

blogカテゴリ一覧

blogger一覧

blogアーカイブ