グーグルマップAPIのStyledMapTypeを使ってホテル・ストリートビューのデザインを変更

グーグルマップAPIのStyledMapTypeを使ってホテル・ストリートビューのデザインを変更しました。

デザインを変えたと言っても少々なのですが、地図の色をグレーにして、マーカーを際立たせて見ました。通常の地図で見たい場合は、地図の右上にある「地図」をクリックすれば変更されます。

ホテル・ストリートビューのgooglemap.jsのコードを以下のように修正・追加しました。

まず、setOptionsに以下のように修正しました。

map.setOptions({
	zoom: 14,
	center: latlng,
	mapTypeControl: true,
	mapTypeControlOptions: { 
		mapTypeIds: [
			'hotels', 
			google.maps.MapTypeId.ROADMAP
		] 
	}
});

次に以下のコードを追加。

 var styleOptions = [
{
	"stylers": [
		{ "saturation": -100 },
		{ "visibility": "simplified" },
		{ "lightness": 22 }
	]
}];

var styledMapOptions = { name: 'ホテル・ストリートビュー' }
var mapType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
	map.mapTypes.set('hotels', mapType );
	map.setMapTypeId('hotels');