displaying a dynamic background image within a google maps infobox on infobox.open

Question

I am trying to add a background image to a div that is within the content of a google maps infobox. I'm running into problems because the function that I'm using to change the .css('background-image') is not recognizing the div's ID. This is likely because the content string has not been DOM loaded when the infobox is opened. I know I have to add an event listening to 'domready' or similar, but I'm not exactly sure how to implement it. Here's the code in question:

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)');

}

score 0 · Answer 1 · answered Mar 26 '13 at 19:00

0

InfoBox.open only takes 2 parameters - a map and an anchor. You need to set that property separately. I found that holding a reference to the boxContent DOM element can make life easier for you.

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/

answered Mar 26 '13 at 19:00

Jeff-Meadows

2,154
18
25

Thanks Jeff. I've edited my original question. My boxContent variable has much more information than one DIV so i will not be able to change the style of boxContent when the infobox opens. I was trying to stay simple with my post since I thought I was on the right track by needed a 'domready' listener. I guess not. Any suggestions? – stokexx Mar 26 '13 at 19:16
That's fine, just use `jQuery.find()` like so: `boxContent.find('#display').css(/*...*/);` – Jeff-Meadows Mar 26 '13 at 19:43

displaying a dynamic background image within a google maps infobox on infobox.open

1 Answers1