Google지도 내 infobox.open에 infobox라는 동적 배경 이미지가 표시됩니다.

Question

google maps infobox의 콘텐츠 내에있는 div에 배경 이미지를 추가하려고합니다. .css ('배경 이미지')를 변경하는 데 사용하는 함수가 div의 ID를 인식하지 못하기 때문에 문제가 발생합니다. Infobox가 열릴 때 콘텐츠 문자열이 DOM로드되지 않았기 때문일 수 있습니다. 나는 'domready'또는 이와 유사한 것을 듣는 이벤트를 추가해야한다는 것을 알고 있지만, 그것을 구현하는 방법을 정확히 모르겠습니다. 문제의 코드는 다음과 같습니다.

var boxContent = var boxContent = "<div id=box><div id=leftside><img id=logo src=" + 
        logopath + " /><h1>" + number + "<br />" + street + 
        "<br />" + city + "</h1><h2>" + phone + 
        "<br /><a target=_blank href=" + website + 
        ">visit website</a></h2></div><div id=menu>" + 
        "<button id=photo onClick=buttonState(this.id)><img src=infomenu/photoicon.png></button></button>" + 
        "<button id=comments onClick=buttonState(this.id)><img src=infomenu/commentsicon.png></button>" + 
        "<button id=games onClick=buttonState(this.id)><img src=infomenu/gamesicon.png></button>" + 
        "<button id=ed onClick=buttonState(this.id)><img src=infomenu/edicon.png></button>" + 
        "<button id=stay onClick=buttonState(this.id)><img src=infomenu/stayicon.png></button>" + 
        "<button id=fly onClick=buttonState(this.id)><img src=infomenu/flyicon.png></button>" + 
        "<div id=display></div>" 

var myOptions = { 
     content: boxContent, 
     disableAutoPan: false, 
     pixelOffset: new google.maps.Size(-400, -173), 
     closeBoxMargin: "-12px -12px 0px 0px", 
     closeBoxURL: "close.png", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 

var ib = new InfoBox(myOptions); 

    google.maps.event.addListener(marker, 'click', function(e) { 
     map.setZoom(13); 
     map.setCenter(this.getPosition()); 
     ib.open(map, this, displayphotos(imagepath); 
    }); 

function displayphotos(imagepath){ 

     $('#display').css('background-image', 'url(' + imagepath + '1.png)'); 

} 

Answer 1

InfoBox.open은지도와 앵커라는 두 가지 매개 변수 만 사용합니다. 해당 속성을 별도로 설정해야합니다. boxContent DOM 요소에 대한 참조를 보유하면 더 쉽게 생활 할 수 있다는 것을 알았습니다.

var boxContent = $("<div id='display'></div>"); 
var myOptions = { 
    content: boxContent[0], 
    disableAutoPan: false, 
    pixelOffset: new google.maps.Size(-400, -173), 
    closeBoxMargin: "-12px -12px 0px 0px", 
    closeBoxURL: "http://www.carltonhotelblanchardstown.com/files/images/a/calendar-popup-close.png", 
    infoBoxClearance: new google.maps.Size(1, 1), 
    pane: "floatPane", 
    enableEventPropagation: false 
}; 

http://jsfiddle.net/Jeff_Meadows/ujxSq/