如何将图像添加到谷歌地图 v3 中标记的信息窗口？答案

【问题标题】：How to add an image to InfoWindow of marker in google maps v3?如何将图像添加到谷歌地图 v3 中标记的信息窗口？
【发布时间】：2012-04-15 09:53:06
【问题描述】：

我有一个要添加到标记的图像 stagleton.png，并且我有一个创建标记的函数。如何更改 InfoWindow 方法以使图像也与 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;
}

【问题讨论】：

标签： javascript html google-maps

【解决方案1】：

试试：

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

【讨论】：

【解决方案2】：

@Dr.Molle，你在 IE 中尝试过吗？我无法让 infoWindows 在 IE 中打开任何时候他们里面有图像。它们只是很小，用 X 来关闭它，但没有其他内容。

删除图片后，其余内容（h1 标签、链接、文本）显示正常，并且 infoWindow 打开。

有什么线索吗？？

编辑：您必须在 IMG 标记中指定高度和宽度属性，以便 IE 能够呈现带有图像的 infoWindow。 IE是史上最烂的浏览器，POS机……

希望对某人有所帮助！

【讨论】：

【解决方案3】：

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

这对我有用。

【讨论】：

检查我的答案，你在 IE 中测试过吗？