マップ上にたくさんのマーカーがあります。各マーカーにカーソルを合わせると、画像がフェードインします。
これまでのところ、InfoBox自体には非表示に見える背景画像がなく、InfoBoxを開くとjQuery効果が画像に適用されますが、同じマウスオーバーイベントを使用してInfoBoxを開いた状態で表示すると、効果をトリガーできません。 。別のDOMリスナーで「クリック」イベントを使用すると機能しますが、何らかの理由でマウスオーバーイベントがトリガーされません。
これが私が動作させようとしているコードのスニペットです(「.hello」は「opacity:0」に設定されています):
var infoBox = new InfoBox({myLatlng: marker.getPosition(), map: map});
google.maps.event.addListener(marker, 'mouseover', function (){
infoBox.open(map, this);
infoBox.setContent('<div id="content"><img class="hello" src="css/images/office.png" alt="" /></div>');
$(".hello").animate({opacity: 1},200);
});
代わりに「クリック」イベントを使用すると、別のDomListenerで機能しますが、マウスオーバーでは機能しません。
google.maps.event.addDomListener(marker, 'click', function() {
$(".hello").animate({opacity: 1},200);
});
どうすれば目的の効果を達成できますか?