CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Tabrock
Tabrock

Reputation: 1169

Adding Images to InfoBox in Google Maps API v3

I'm attempting to add an image to my custom infobox (please note this isn't an infoWindow). The script runs fine and loads properly until I add the 'img src' line to the HTML contents of the infoBox. From this point, nothing loads. I've been trying to figure it out and have found nothing online, everything I've found pertains to infoWindows.

Code Snippet:

 var marker_C = new google.maps.Marker({
         map: map,
         draggable: true,
         position: myCenter,
         visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #f5c82f; padding: 5px;"; 
        boxText.innerHTML = "<strong>Taylor's House</strong>, Tallanasty<br><img border="0" src="/images/bar.jpg" alt="BAR" width="304" height="228"><br>The text for whats going on here<br>My Address Here";

        var myOptions = {
                 content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-180, 0),//X axis should be half the size of box width
                zIndex: null,
                boxStyle: { 
                  background: "url('tipbox.gif') no-repeat",
                  opacity: 0.85,
                  width: "360px"
                 },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(10, 10),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(map, marker);

if I set 'boxText.innerHTML' equal to: "<strong>Taylor's House</strong>, Tallanasty<br><br>The text for whats going on here<br>My Address Here"; without the image, everything loads fine.

Hoping someone who's experienced this can point me in the right direction.

Upvotes: 0

Views: 2250

Answers (1)

putvande
putvande

Reputation: 15213

You need to escape the double qoutes in your innerHTML string:

boxText.innerHTML = "<strong>Taylor's House</strong>, Tallanasty<br><img border=\"0\" src=\"/images/bar.jpg\" alt=\"BAR\" width=\"304\" height=\"228\"><br>The text for whats going on here<br>My Address Here";

Otherwise you get an error.

Upvotes: 3

Related Questions