グーグルマップAPIのStyledMapTypeを使ってホテル・ストリートビューのデザインを変更
グーグルマップAPIのStyledMapTypeを使ってホテル・ストリートビューのデザインを変更しました。
デザインを変えたと言っても少々なのですが、地図の色をグレーにして、マーカーを際立たせて見ました。通常の地図で見たい場合は、地図の右上にある「地図」をクリックすれば変更されます。
ホテル・ストリートビューのgooglemap.jsのコードを以下のように修正・追加しました。
まず、setOptionsに以下のように修正しました。
1 2 3 4 5 6 7 8 9 10 11 | map.setOptions({ zoom: 14, center: latlng, mapTypeControl: true, mapTypeControlOptions: { mapTypeIds: [ 'hotels', google.maps.MapTypeId.ROADMAP ] } }); |
次に以下のコードを追加。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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'); |
