title: Add HTML around custom google map marker
body: <p>I'm trying to add a pulse effect to a custom map marker. When I add the animation CSS to the map marker, the animation works, but it seems to be bound by the dimensions of the container that it gets put in, cutting off the pulse effect. I'm trying to figure out how to add a div around the marker image so that I can control its size and possibly other attributes. Here's how I initialize the map:</p>
  
  <pre><code>    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
      });
     });
    }
  </code></pre>
  
  <p>That places the pin on the map and with CSS I add the animation:</p>
  
  <pre><code>   img[src*='map-pin-solid.svg'] {
       animation: pulse 1.5s ease-out infinite;
     }
  </code></pre>
  
  <p>That works, but as mentioned, the pin is bound by it's container div, so the pulse animation gets cut off at the boundaries of the div. I'd like to add my own container div around it so I can control its size.  I've been searching other answers on this site and around the web, and I think I should be using a <a href="https://developers.google.com/maps/documentation/javascript/customoverlays" rel="nofollow noreferrer">custom overlay</a> to do this, but looking at that code I have no idea where to even begin.  I'd basically like to be inserting something like this as the marker</p>
  
  <pre><code>    &lt;div class = "marker"&gt;
        &lt;img src = "images/map-pin.svg" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How do I do this?</p>