谷歌地图:信息窗口

Question

我映射了一些对象，并使用以下脚本创建了信息窗口：

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
info: '<h3 style="color:brown">' + ThName + '</h3>' + 
'<img src = "' + photo1 + '" style="width:200px;height:150px; vertical-align:top;margin-right:.5em"/>' + 
'<img src = "' + photo2 + '" style="width:200px;height:150px; vertical-align:top"/>' + 
'<br/> ' + cap1 + ' ' + cap2
});

如何将标题 cap1 放在照片 1 下，将 cap2 放在照片 2 下？

我最初的想法是创建一个包含两列和两行的表，但我不知道如何做。

Answer 1

我正在为我当前的项目使用 Google Maps API，并将信息窗口用于相同的目的。如果您愿意，可以以类似的方式使用它：

var contentString = '<h3 style="color:brown">' + ThName + '</h3>' + 
'<figure>'+ '<img src = "' + photo1 + 
'"style="width:200px;height:150px; vertical- 
align:top;margin-right:.5em"/>' +
'<figcaption>'+ cap1 + '</figcaption>' +
'</figure>' + '<figure>'+ '<img src = "' + photo2 + 
'"style="width:200px;height:150px; vertical- 
align:top;"/>' +'<figcaption>'+ cap2 + 
'</figcaption>' + '</figure>';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
content: contentString
});

对于字幕，我使用了图形和无花果标题标签。