Google MapのInfoboxの画像スライダー

Question

ユーザーがマップ上のマーカーをクリックすると、Infobox（コントロールが豊富なInfowindow）ポップアップが表示されます。このポップアップウィンドウでは、現在、jQueryイメージスライダー、特にNivoSliderを挿入しようとしています。

問題： 通常のHTMLページ上しかし、この画像スライダーのみ動作し、ときインフォボックス内のすべてでは動作しません。私は内部にのinfoboxの画像が必要です。

のjQuery/JSコード

jQueryの画像スライダーをロードする部分が<div id="slider class="nivoSlider"><img...../><img....../></div>"

$(window).load(function() { 

$（ '＃スライダー'）で囲まれnivoSliderを（）。 //は

$（ "＃のsearch_button"）#slider div要素でnivosliderをロードします（関数（E）{ e.preventDefault（）をクリックしてください。。。 するvar SEARCH_LOCATION = $（ "＃のSEARCH_LOCATION"）のval（ ）; $ .getJSON（.........................、関数（）{

 for(i = 0; i < json.length; i++) { 

      // Place markers on map 
      var latLng = new google.maps.LatLng(json[i].lat, json[i].lng); 
      var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map 
      }); 
      markers.push(marker); 

      // Create infowindows 
      var boxText = '<div id="infobox"> \ 
           <div id="infobox_header_title"> \ 
            <span id="infobox_header_price">$' + json[i].price + '</span> \ 
            <span id="infobox_header_room">' + json[i].bedroom + 'br </span> \ 
            <span id="infobox_header_address">' + json[i].address_1 + '</span> \ 
           </div> \ 
           <div id="slider" class="nivoSlider"> \ 
            <img src="/images/cl/' + json[i].photos[0] + '.jpg" /> \ 
            <img src="/images/cl/' + json[i].photos[1] + '.jpg" /> \ 
           </div> \ 
          </div>'; 
      var infoboxOptions = { 
       content: boxText, 
       disableAutoPan: false, 
       maxWidth: 0, 
       pixelOffset: new google.maps.Size(-140, 0), 
       zIndex: null, 
       boxStyle: { 
       }, 
       closeBoxMargin: "10px 2px 2px 2px", 
       closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
       infoBoxClearance: new google.maps.Size(1, 1), 
       isHidden: true, 
       pane: "floatPane", 
       enableEventPropagation: false 
       }; 

      var infobox = new InfoBox(infoboxOptions); 
      infobox.open(map, markers[i]); 
      infoboxes.push(infobox); 

      // Create Listeners 
      markers[i]._index = i; 
      google.maps.event.addListener(markers[i], 'click', function() { 

       //infoboxes[this._index].open(map, markers[i]); 
       infoboxes[this._index].show(); 

      }); 
     }; 

     // Fill screen with markers 
     mapAutoCenter(markers); 

    }); 

私が原因と思われるものこれは$('#slider').nivoSlider()が開始時に正しく呼び出されたときに、インフォボックス内の<div>とは何かが作成されていない可能性があります。

追加情報：私はPHPとCodeigniterフレームワークを使用してGoogle Maps API V3を使用しています。

Answer 1

スライダーはイベントリスナーをバインドして動作します。このイベントリスナーは、infoWindowがDOMツリーから削除されたときに失われます（Googleマップは、DOMツリーから表示されていないときにinfoWindowを削除します）。 infoWindowが表示されても、リスナーは削除されます。

NivoSliderプラグインのスライダーリスナー部分を書き直す必要があります。ここにいくつかのガイダンスがあります。

クリックハンドラー、mousemoveハンドラー、およびmouseupハンドラー関数を記述し、どこかに入れてください（おそらく、NivoSliderプラグインの中に入れて、ぼんやりした空間を汚染しないようにしてください）。このような何か：

$.fn.nivoSlider.handlers = { 
    sliderClickHandler: function (event) { 
     // register mousemove and mouseup handlers 
     $(document).bind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler); 
     $(document).bind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler) 
    }, 

    sliderMMoveHandler: function (event) { 
     // process mousemove event (move the slider, change images, etc. put your logic here) 
    }, 

    sliderMouseupHandler: function (event) { 
     // unregister the listeners since the click event has completed 
     $(document).unbind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler) 
     $(document).unbind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler); 
    } 
}; 

さて、onclickイベントとしてHTMLに直接sliderClickHandlerを登録します。

onclick="sliderClickHandler()" 

：

<div id="slider" class="nivoSlider" onclick="$.fn.nivoSlider.handlers.sliderClickHandler()"> 

お知らせ、あなたはこのような何かを行うことができませんでしたリスナーをグローバル空間から実行されるDOM要素に直接入れているため（典型的なjavascrとは異なり、他の名前空間はバインドされません）私たちは閉鎖であり、定義された場所をカプセル化/覚えているように機能しています）。

この回避策には大きな問題が1つあります（ただし、より良い方法はありません）。あなたのページに複数のNivoSliderがある場合（当然）、NivoSliderを操作しているかどうかによって、ハンドラ関数の動作が異なるようになります。各インスタンスのクロージャとしてハンドラを作成することはできませんので、各NivoSliderに対して一意のIDを持つ必要があり、ハンドラは現在アクティブなオブジェクトのIDに応じて動作する必要があります。 （したがって、現在アクティブなNivoSliderのIDをどこかに保存する必要があります）。

幸運。間違いなく楽しいですが、あまり面白くないです。