在自定义Google地图标记周围添加HTML

我正在尝试向自定义地图标记添加脉冲效果。当我将动画CSS添加到地图标记中时，动画就可以了，但是它似乎受放入它的容器尺寸的限制，从而切断了脉冲效果。我试图弄清楚如何在标记图像周围添加div，以便可以控制其大小以及其他属性。这是我初始化地图的方法：

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(20, -80),
      disableDefaultUI: true
    });


    var features = [
     {
       position: new google.maps.LatLng(20, -80)
     }
    ];

    // Create markers
       features.forEach(function(feature) {
       var marker = new google.maps.Marker({
       position: feature.position,
       icon: 'images/map-pin.svg',
       map: map
    });
   });
  }

将该图钉放置在地图上，并使用CSS添加动画：

   img[src*='map-pin-solid.svg'] {
     animation: pulse 1.5s ease-out infinite;
   }

那是可行的，但是如前所述，销钉是由其容器div绑定的，因此脉冲动画会在div的边界处被截断。我想在其周围添加自己的容器div，以便可以控制其大小。我一直在这个网站和整个网络上搜索其他答案，我认为我应该使用自定义叠加层来执行此操作，但是查看该代码，我什至不知道从哪里开始。我基本上想插入像这样的标记

    <div class = "marker">
      <img src = "images/map-pin.svg" />
    </div>

我该怎么做呢？