今日、Google Maps APIを使う用事があって、APIキーの要らないversion 3を使っていたら、思わぬところでトラブル発覚。
デフォルトの地図では、なぜが大きめの商業施設が表示されない。例えば、京都の場合だと、四条河原町の高島屋や、阪急百貨店(これはもう表示されなくてもいいのかも。)、北野白梅町のイズミヤなど、ランドマークになるようなメジャーな建物が表示されていない状態。
何か失敗したのかと思って、Googleのチュートリアルにあるサンプルページを見ても同じように表示されない。
いろいろ探してみると、StyledMapTypeでどうにかなることがわかり、Google Maps API Styled Map Wizardというページも見つけたので、Styleを少しいじってみた。
すると、Point of interestのBusinessのVisibilityをoffにすると、同じ状態になることがわかった。とりあえずの回避策として、featureTypeとelementTypeのすべて(all)のvisibilityをonにしたmapTypeを作成して、それを追加するようにした。この問題は、バグというよりは、Google側の設定の問題かもしれない。全世界的にbusinessはoffにするということになっていて、日本ではたまたまそれが結構重要な建物になっているというだけのことかも。
コードとしては以下のような感じ。
var mapstyle = [{
featureType: ‘all’,
elementType: ‘all’,
stylers: [{visibility: “on” }]
}];
var latlng = new google.maps.LatLng(35.010315, 135.749817); // 京都中心
var myOptions = {
zoom: 13,
center: latlng,
mapTypeControlOptions: {
mapTypeIds: [
’mainmap’, // 普通の地図
google.maps.MapTypeId.HYBRID, // 空中写真と地図(googleデフォルト)
google.maps.MapTypeId.SATELLITE, // 空中写真(googleデフォルト)
google.maps.MapTypeId.TERRAIN // 地形(googleデフォルト)
]
}
};
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
var styleMapOptions = {
map: map,
name: “地図”
}
var myMapType = new google.maps.StyledMapType(mapstyle, styleMapOptions);
map.mapTypes.set(‘mainmap’, myMapType);
map.setMapTypeId(‘mainmap’);