今さらかもしれないけど新しくなったGoogle Mapsをちょっといじってみました。
と言っても前のバージョンも深く触ったことがないので比べることもできません。
APIキーが不要になった
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=TRUE_OR_FALSE"></script>
以前までドメイン毎に必要だったAPIキーが不要になりました。上記のjsを読むだけの簡単な仕様。引数のsensorはデバイスのロケーションサービスを使う場合にはtrueを、使わない場合はfalseに設定。
スタイルを変える
地図上のアイテムそれぞれに異なったスタイルを設定することが出来るようになりました。単純に見た目を変えられるってことですね。上の地図がそうです。今まではどのサイトのどのページでも同じカラーリングの地図でしたが、サイトのテイストに併せて変更することが可能になりました。
var stylez = [
{
featureType: "all",
elementType: "all",
stylers: [
{ visibility: "on" },
{ hue: "#003366" },
{ lightness: -10 },
{ saturation: -30 },
{ gamma: 0.8 }
]
}
];
var mapStyleType = new google.maps.StyledMapType( stylez, {map:ID名, name:""});
map.mapTypes.set('なまえ', mapStyleType);
map.setMapTypeId('なまえ');
各プロパティの内容はこんな感じです。
- featureType
地図上のアイテム。道路とかランドマークとか公園とか。
MapTypeStyleFeatureType - elementType
地図全体か地形かラベルか。
MapTypeStyleElementType - visibility
そもそも表示するかしないか。onかoff。 - hue
色相。#つきの16進数指定。 - lightness
明度。デフォルトは0。-100〜100。 - saturation
彩度。デフォルトは0。-100〜100。 - gamma
コントラスト。デフォルトは1。0〜10。0に近づくほどきつく、10に近づくほどゆるくコントラストが効きます。
パラメータをいじりながら見た目を確認できるこのデモが便利です。
色々いじった後にShow JSONボタンをクリックすると生成されたコードが表示されます。
マーカーのアイコンを変える
あまり前のバージョンと変わってないような気がします。
var image = new google.maps.MarkerImage(
'http://blog.abakane.com/wp-content/themes/ab/images/marker_01.png',
new google.maps.Size(65, 87),
new google.maps.Point(0,0),
new google.maps.Point(33, 82)
);
var shadow = new google.maps.MarkerImage(
'http://blog.abakane.com/wp-content/themes/ab/images/marker_02.png',
new google.maps.Size(74, 56),
new google.maps.Point(0,0),
new google.maps.Point(12, 45)
);
var shape = {
coord: [0, 0, 65, 0, 65, 65, 0 ,65],
type: 'poly'
};
var marker = new google.maps.Marker({
position : ロケーション,
map : map,
shadow : shadow,
icon : image,
shape : shape,
title : "ロールオーバー時に表示されるチップス",
zIndex : 0
});
imageがマーカーアイコン、shadowがマーカーの影、shapeがマーカーをクリックする時のヒットエリアです。shapeのcoordの指定は[x0, y0, x1, y1, x2, y2, ... ]みたいな感じです。htmlで画像内にリンクを貼る時と同じ要領ですね。
png画像を指定すれば透過されますが、対応してないブラウザでは当然表示されないものと思われます。
new google.maps.MarkerImage()
- 引数1
画像のURL。 - 引数2
表示するアイコンのサイズ。 - 引数3
使用画像の左上座標。通常(0, 0)。 - 引数4
使用画像のアンカー座標（マーカーの先っぽ）。
実際のコード
//html側
<body onload="testMap(35.65095,139.687643)">
<div id="mapTest"></div>
</body>
//js側
var image = new google.maps.MarkerImage(
'http://blog.abakane.com/wp-content/themes/ab/images/marker_01.png',
new google.maps.Size(65, 87),
new google.maps.Point(0,0),
new google.maps.Point(33, 82)
);
var shadow = new google.maps.MarkerImage(
'http://blog.abakane.com/wp-content/themes/ab/images/marker_02.png',
new google.maps.Size(74, 56),
new google.maps.Point(0,0),
new google.maps.Point(12, 45)
);
var shape = {
coord: [0, 0, 65, 0, 65, 65, 0 ,65],
type: 'poly'
};
var stylez = [
{
featureType: "all",
elementType: "all",
stylers: [
{ visibility: "on" },
{ hue: "#003366" },
{ lightness: -10 },
{ saturation: -30 },
{ gamma: 0.8 }
]
}
];
function testMap( _lat, _lng){
var initialLocation = new google.maps.LatLng( _lat, _lng);
var infoWindow = new google.maps.InfoWindow();
var myOptions = {
zoom : 14,
center : initialLocation,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapTest"), myOptions);
google.maps.event.addListener( map, 'click', function(){
infoWindow.close();
});
var marker = new google.maps.Marker({
position : initialLocation,
map : map,
shadow : shadow,
icon : image,
shape : shape,
title : "",
zIndex : 0
});
google.maps.event.addListener( marker, 'click', function(){
infoWindow.setContent( '<p style="color:black">内容がないよう</p>' );
infoWindow.open( map, marker);
});
var mapStyleType = new google.maps.StyledMapType( stylez, {map: map, name:""});
map.mapTypes.set('ablog', mapStyleType);
map.setMapTypeId('ablog');
}
表示するナビゲーションの種類や位置なんかも細かく指定出来るみたいです。共通の認識として形成されたスタイルを安易に変更することでユーザに負担を強いることがないように気をつけて使いたいです。