Отобразить href как изображение в информационном окне карт Google

Question

Я импортирую файл json в карты Google для отображения маркеров с информационными окнами.Одним из элементов json является ссылка на сохраненное изображение.Я хочу, чтобы href отображался как изображение или ссылка на кнопку изображения, а не как текст.Я попытался разместить теги изображений и HTML-теги div внутри infoWindow.setContent ();согласно некоторым ответам, которые не работали.Буду признателен за любую помощь или идеи.

Пример файла json

[
  {
    "lat":"50.90737498194628",
    "lng":"-114.10501346073356",
    "username":"Bill Someone",
    "role":"Incident Commander",
    "text":"Test message with photo attached",
    "image":"https://someimagepostImages%2FdU8vD3evV5mWOpbWRHq",
    "time":"2018/10/23 09:28:02am"
  }
]

map.js

function infoBox(map, marker, data) {
     var infoWindow = new google.maps.InfoWindow();
         google.maps.event.addListener(marker, "click", function(e) {
             infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" + '<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + '<b>image:&nbsp;&nbsp;</b>' + data.image);
             infoWindow.open(map, marker);
         });

     (function(marker, data) {
       google.maps.event.addListener(marker, "click", function(e) {
         infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" + '<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + '<b>image:&nbsp;&nbsp;</b>' + data.image);
         infoWindow.open(map, marker);
       });
     })(marker, data);
 }

Answer 1

Для этого вам понадобится тег img или тег a.

infoWindow.setContent ('<b>name:&nbsp;&nbsp;</b>' + data.username + "<br />" +
'<b>role:&nbsp;&nbsp;</b>' + data.role + "<br />" + '<b>message:&nbsp;&nbsp;</b>' + 
data.text + "<br />"  + '<b>time:&nbsp;&nbsp;</b>' + data.time + "<br />" + 
'<b>image:&nbsp;&nbsp;</b><img src="' + data.image + '" >);

Вы можете вставить HTML в информационное окно без особых проблем.Вы также можете стилизовать элементы.Я бы порекомендовал вам создать небольшой div с элементами, упорядоченными более семантически, вместо использования тегов b.