Google Maps API V3のスタイリングについて(StyledMapType)
スタイリングの続き。
今日はStyledMapTypeをつかって地図の見え方を変更してみる。
この方法だと通常マップには影響がでずに、別マップとして登録可能。
前回と同じように学校を水色にして別背景マップとして登録してみた。
中心は富山県庁。
中心は富山県庁。
右上の「Blue School」をクリックすることで地図が切り替わるのが確認できるかと。
ソースはこんな感じ。
----
function initialize6() {
var blueSchoolStyles = [
{
featureType: "poi.school",
stylers: [
{ saturation: 40 },
{ lightness: 30 },
{ hue: "#87ceeb" },
{ gamma: 0.8 }
]
}
];
var blueSchoolMapType = new google.maps.StyledMapType(blueSchoolStyles,
{name: "Blue School"});
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(36.6952907, 137.2113383),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'blue_school']
},
zoomControl: true
};
var map = new google.maps.Map(document.getElementById("map_canvas6"),
myOptions);
map.mapTypes.set('blue_school', blueSchoolMapType);
map.setMapTypeId('blue_school');
}
google.maps.event.addDomListener(window, 'load', initialize6);
----
ソースはこんな感じ。
----
function initialize6() {
var blueSchoolStyles = [
{
featureType: "poi.school",
stylers: [
{ saturation: 40 },
{ lightness: 30 },
{ hue: "#87ceeb" },
{ gamma: 0.8 }
]
}
];
var blueSchoolMapType = new google.maps.StyledMapType(blueSchoolStyles,
{name: "Blue School"});
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(36.6952907, 137.2113383),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'blue_school']
},
zoomControl: true
};
var map = new google.maps.Map(document.getElementById("map_canvas6"),
myOptions);
map.mapTypes.set('blue_school', blueSchoolMapType);
map.setMapTypeId('blue_school');
}
google.maps.event.addDomListener(window, 'load', initialize6);
----
0 件のコメント:
コメントを投稿