Окно информации Google Как добавить пользовательские Html ссылки / изображения

Question

Я пытаюсь создать карту Google с всплывающим информационным окном.

В каждом информационном окне есть список ссылок на разные статьи. Я хотел попробовать добавить ссылку в стиле карточки под списком ссылок в окне. Но кажется, что он невидим во всем информационном окне Google.

The css for the card I am enterign is:

    * {
        padding: 0;
        margin: 0;
    }

    .card {
        font-family: 'Roboto', sans-serif;
        max-width: 320px;
        display: inline-flex;
        border: 1px solid #ddd;
        transition: .5s;
        position: absolute;
        top: 40%;
        left: 50%;
        margin-left: -160px;
        margin-top: -100px;
        opacity: 0;
        visibility: hidden;
    }

    .card:hover {
        box-shadow: 0 2px 13px #ddd;
    }

    .card.show {
        opacity: 1;
        visibility: visible;
        top: 50%;
    }

    .card .image_area {
        width: 43%;
        background-size: cover;
        background-position: center;
    }

    .card img {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .card .text_area {
        width: 57%;
        padding: 10px;
    }

    .card h2 {
        margin: 0;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 10px;
    }

    .card p {
        font-size: 14px;
        margin: 0 0 10px;
    }

    .card .read_more {
        text-align: right;
    }

    .card .read_more a {
        color: #fff;
        display: inline-block;
        font-size: 14px;
        text-decoration: none;
        background-color: #ff6f26;
        padding: 4px 8px;
        transition: .3s;
    }

    .card .read_more a:hover {
        background-color: #000;
    }

    /*button*/
    .map_merker {
        position: absolute;
        left: 49%;
        bottom: 20px;
    }

    .map_merker img {
        height: 50px;
        cursor: pointer;
    }

And the html for the card is:

    <!--single card start-->
 

Название продукта

Lorem ipsum dolor sit amet, conctetur adipisicing elit.

Подробнее

Кто-нибудь попросит показать, как я строю пузырек

//put pop up bubble html together
function BuildBubbleHTML(hike) {
  html = "";
  html = html + '<h6>' + hike.name + '</h6>';
  //If Seek Adventure Links Exist
  html = html + '<div class="list-group">';
  if (hike.seekAdventureGuideList.length > 0) {
    seekAdventureHTML = "";
    //seekAdventureHTML = '<p>Seek Adventure Links</p>';
    //seekAdventureHTML = seekAdventureHTML + '<ul>'
    var i;
    for (i = 0; i < hike.seekAdventureGuideList.length; i += 2) {
      //seekAdventureHTML = seekAdventureHTML + '<li class="list-group-item">';
      seekAdventureHTML = seekAdventureHTML + '<a href="' + hike.seekAdventureGuideList[i + 1] + '"target="_blank" class="list-group-item list-group-item-action">';
      seekAdventureHTML = seekAdventureHTML + hike.seekAdventureGuideList[i] + '</a>';
    }
    //seekAdventureHTML = seekAdventureHTML + '</ul>';
    html = html + seekAdventureHTML;
  }

  //If Blog Links Exist
  if (hike.blogGuideList.length > 0) {
    blogHTML = "";
    //blogHTML = '<p>Blog Links</p>';
    //blogHTML = blogHTML + '<ul>'
    var i;
    for (i = 0; i < hike.blogGuideList.length; i += 2) {
      //blogHTML = blogHTML + '<li class="list-group-item">';
      blogHTML = blogHTML + '<a href="' + hike.blogGuideList[i + 1] + '"target="_blank" class="list-group-item list-group-item-action"> ';
      blogHTML = blogHTML + hike.blogGuideList[i] + '</a>';
    }
    //blogHTML = blogHTML + '</ul>';
    html = html + blogHTML;
  }

  //If Blog Links Exist
  if (hike.youTubegGuideList.length > 0) {
    youTubeHTML = "";
    //youTubeHTML = '<p>YouTube Guide Links</p>';
    //youTubeHTML = youTubeHTML + '<ul>'
    var i;
    for (i = 0; i < hike.youTubegGuideList.length; i += 2) {
      //youTubeHTML = youTubeHTML + '<li class="list-group-item">';
      youTubeHTML = youTubeHTML + '<a href="' + hike.youTubegGuideList[i + 1] + '"target="_blank" class="list-group-item list-group-item-action"> <i class="fab fa-youtube"></i>&nbsp;  '  ;
      youTubeHTML = youTubeHTML + hike.youTubegGuideList[i] + '</a>';
    }
    //youTubeHTML = youTubeHTML + '</ul>';
    html = html + youTubeHTML;
  }

  html = html + '    <!--single card start--><div class="card"><div class="image_area"><img src="watch.jpg" alt="img"></div><div class="text_area"><h2>Product Title</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><div class="read_more"><a href="#">Learn more</a></div></div></div><!--single card end-->';


  html = html + '</div>';
  return html;
};

Answer 1

У меня так работает:

.card:hover {
        opacity: 1;
      }