Google Mapで情報ウィンドウ(InfoWindow)を出した際に、画像がなかったらエラー画像を出したかったので色々探してみたメモ。
基本処理は省いてます。
まずは、情報ウィンドウを作成。
1 2 3 |
var infowin = new google.maps.InfoWindow({ disableAutoPan: true }); |
そして マーカーオブジェクトにイベントをバインドして情報ウィンドウを開くようにする。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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]); }); |
そして本題、 画像エラーを検出します。
1 2 3 4 5 6 7 8 9 |
// 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にアクセス出来なかった為です。