Google Maps InfoBox에서 Div에 액세스하는 방법?

Question

지도상의 많은 마커 중 하나를 클릭하면 Google지도가 생성하는 infobox 내에 jquery의 $('#divname')을 사용하여 <div>을 선택하려고합니다.

문제 : 마커를 클릭 한 후 $("#gallery")을 사용하여 div에 액세스하려고하면 해당 마커의 클릭 이벤트 리스너 내부에서 아무 일도 일어나지 않습니다. 해당 div에 포함 된 html을 클릭 수신기에서 console.log($("#gallery").html())을 사용하여 가져 오려고 시도했지만 null을 반환합니다 !! 이 div를 어떻게 선택할 수 있습니까?

이벤트 리스너 코드 조각 코드를 클릭

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

    infoboxes[this._index].open(map, markers[this._index]); 
    infoboxes[this._index].show(); 
    console.log($('#gallery').html()); 

});

인포 박스 발췌문 코드에서

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="gallery"> \ 
          <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); 
    infoboxes.push(infobox); 

      //<Click Event Listener code comes in here> 

Answer 1

I, 당신은 루프에서 마커를 추가하는 무엇을보고? 따라서 각 마커의 infoWindow에 대해 동일한 ID를 사용하고 HTML/JS/CSS 규칙에 대해 동일한 ID를 갖는 하나 이상의 요소를 가지며 실패하는 것은 정상입니다. 내가 대신 할 일은 마커에 클래스 만 사용하고 이벤트 리스너에서는 .gallery div의 내용을 이와 같이 가져올 수 있습니다 (시도하지는 않았지만 작동하지 않으면 아이디어를 얻어야합니다) :

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

    infoboxes[this._index].open(map, markers[this._index]); 
    infoboxes[this._index].show(); 
    console.log($(infoboxes[this._index].getContent()).find('.gallery')); 

});