How to add an image to InfoWindow of marker in google maps v3?

13
votes

I have an image that I want to add to a marker, stagleton.png, and I have a function to create a marker. How do I change the InfoWindow method so that the image is also displayed with the text in the InfoWindow? 

function createMarker(name, latlng, mapsent)
{
    var marker = new google.maps.Marker({
                       position: latlng,
                       map: mapsent,
                       title: name   
                       });
    marker.info = new google.maps.InfoWindow({
              //when I add <IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> the maps will not load
      content: <IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> "My name is " + name

    });

    google.maps.event.addListener(marker, 'click', function(){
        marker.info.open(mapsent, marker);
    });
    return marker;
}
3
javascripthtmlgoogle-maps

3 Answers

25
votes

Try:

content: '<IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> My name is ' + name
3
votes

@Dr.Molle, did you try that in IE? I can't get the infoWindows to open in IE any time they have an image inside of them. They are just tiny with the X to close it, but no other content.

As soon as I remove the image, the rest of the content (h1 tags, links, text) shows fine, and the infoWindow opens.

Any clues??

EDIT: You MUST specify height and width attributes in the IMG tag for IE to be able to render the infoWindow with an image in it. IE is the WORST browser in history, what a POS...

Hopefully that helps someone!

0
votes
  var contentString = "<a href=/popups/" + id + '>' + name + "</a>" + '<br>' + address
  + '<br>' + category + '<br>' + "<img width='80' src=" + image + ">" ;

This worked for me.