2013年1月5日 : してログ

Google Maps API V3 のマーカーに追加になった、size と origin を使うと、大きい画像の一部分をアイコン画像として使うことができるようです。メリットとしては、サーバーとの通信を減らし読み込み時間を改善できる、ということなのでしょう。

昨日の Boeing 747 flight! に、上のような画像を用意して試してみました。例えば、赤いマークされたアイコンを表示するには、下記のようにします。

var mkr_plane = new google.maps.Marker({
	position: new google.maps.LatLng(37.954075, 139.113039),
	icon: new google.maps.MarkerImage("B747-400-99.png",
		new google.maps.Size(99, 99), // Size
		new google.maps.Point(189,99), // Origin
		new google.maps.Point(50, 50)), // Anchor
});

ちなみに、変更前はマーカーイメージ画像そのものを入れ替えてアニメーションさせていました。この方法を使った結果、チラツキがまったく無くなり非常にイイ感じです。