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

Question

我正在尝试为自定义地图标记添加脉冲效果。当我将动画 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 以便我可以控制它的大小。我一直在本网站和网络上搜索其他答案，我认为我应该使用 custom overlay 来执行此操作，但查看该代码我什至不知道从哪里开始。我基本上想插入这样的东西作为标记

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

我该怎么做？

Answer 1

事实证明我可以用这种方式调整标记的大小以为动画腾出空间：

    var image = {
      url: 'images/map-marker.svg',
      size: new google.maps.Size(100, 100),
      origin: new google.maps.Point(-20, -20),
      anchor: new google.maps.Point(30, 50),
      scaledSize: new google.maps.Size(30, 30)
   };

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

Add HTML around custom google map marker

google-maps

google-maps-markers