Google Map でウィンドウを表示したときの画像errorイベント

Google Mapで情報ウィンドウ（InfoWindow）を出した際に、画像がなかったらエラー画像を出したかったので色々探してみたメモ。

基本処理は省いてます。

まずは、情報ウィンドウを作成。

var infowin = new google.maps.InfoWindow({
	disableAutoPan: true
});

var infowin = new google.maps.InfoWindow({

disableAutoPan: true

});

そしてマーカーオブジェクトにイベントをバインドして情報ウィンドウを開くようにする。

marker[options.id] = new google.maps.Marker(
{
	position: location,
	map: map,
	icon: options.icon,
	animation: google.maps.Animation.DROP,
	title: options.title
});


// mouseoverイベントを取得するListenerを追加
google.maps.event.addListener(marker[options.id], 'mouseover', function()
{
	infowin.setContent(options.content);
	infowin.open(map, marker[options.id]);

});

marker[options.id] = new google.maps.Marker(

{

position: location,

map: map,

icon: options.icon,

animation: google.maps.Animation.DROP,

title: options.title

});

// mouseoverイベントを取得するListenerを追加

google.maps.event.addListener(marker[options.id], 'mouseover', function()

{

infowin.setContent(options.content);

infowin.open(map, marker[options.id]);

});

そして本題、画像エラーを検出します。

// infowinを表示する時
google.maps.event.addListener(infowin, 'domready', function()
{
	$("#googlemap01").find('img').off('error').on('error', function()
	{
		//ロールオーバー用
		$(this).attr('src', 'images/noimage.jpg');
	});
});

// infowinを表示する時

google.maps.event.addListener(infowin, 'domready', function()

{

$("#googlemap01").find('img').off('error').on('error', function()

{

//ロールオーバー用

$(this).attr('src', 'images/noimage.jpg');

});

googlemap用のセレクタを直接書いてますが、thisではDOMにアクセス出来なかった為です。