Home > Web > カスタマイズ可能なGoogle Mapを作れる様に

カスタマイズ可能なGoogle Mapを作れる様に

属性や色など、さらにカスタマイズ可能なGoogle Mapを作れるAPI ver3が発表

Google I/O で紹介された「Google Maps API」の最新版であるバージョン3では、

「Google MAPS API」に登録してキーを取得すれば可能だったが、要らなくなったそうです。


カスタマイズした地図を表示する

ソースコード

「Google Maps API Styled Map Wizard」とドキュメントを見ながら適当に書いたソースコードを掲載しておきます。

Javascript
google.maps.event.addDomListener(window, 'load', function() {

	var map;

	var stylez = [
		{
			featureType: "road.highway",
			elementType: "all",
			stylers: [
				{ saturation: -98 },
				{ lightness: -33 }
			]
		},{
			featureType: "road.local",
			elementType: "all",
			stylers: [
				{ lightness: -37 }
			]
		},{
			featureType: "water",
			elementType: "all",
			stylers: [
				{ hue: "#00e5ff" },
				{ lightness: -60 },
				{ saturation: 20 }
			]
		},{
			featureType: "road.arterial",
			elementType: "all",
			stylers: [
				{ saturation: -100 },
				{ lightness: -23 }
			]
		},{
			featureType: "administrative.province",
			elementType: "all",
			stylers: [
				{ hue: "#ff3300" },
				{ saturation: 82 },
				{ lightness: -13 }
			]
		},{
			featureType: "administrative.locality",
			elementType: "all",
			stylers: [
				{ hue: "#ff0000" },
				{ saturation: 98 },
				{ lightness: 18 }
			]
		},{
			featureType: "landscape.man_made",
			elementType: "all",
			stylers: [

			]
		}
	];

	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(35.689488, 139.691706),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
	};
	
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	var styledMapOptions = {
		map: map,
		name: "Google Maps API v3 Test"
	}

	var jMapType = new google.maps.StyledMapType(stylez, styledMapOptions);

	map.mapTypes.set('TEST', jMapType);
	map.setMapTypeId('TEST');

});

リンク

公式

記事
ウィザード
API

関連

ドキュメント



この記事に関連のあるページ

ソーシャルブックマーク

この記事の はてなブックマーク

この記事へのコメント

コメントフォーム

※画像の中の文字を半角で入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック

Home > Web > カスタマイズ可能なGoogle Mapを作れる様に

TopHatenar
購読者数・ブックマーク数相関グラフ
リンク - Blog
クリエイター
展覧会
Adobe
SIGGRAPH
with Ajax Amazon

Return to page top

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。