title: Google Maps SVG marker with animation
body: <p>Can’t get this SVG to animate as a marker on Google Maps</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;g fill="none" fill-rule="evenodd" stroke-width="1" stroke="black" stroke-opacity="0.3"&gt;
      &lt;circle cx="50" cy="50" r="50"&gt;
        &lt;animate attributeName="r" begin="0s" dur="3s" values="0;50" keyTimes="0;1" keySplines="0.1,0.2,0.3,1" calcMode="spline" repeatCount="indefinite"&gt;&lt;/animate&gt;
        &lt;animate attributeName="stroke-opacity" begin="0s" dur="3s" values="0;.3;.3;0" repeatCount="indefinite"&gt;&lt;/animate&gt;
      &lt;/circle&gt;
      &lt;circle cx="50" cy="50" r="30"&gt;
        &lt;animate attributeName="r" begin="-1s" dur="3s" values="0;50" keyTimes="0;1" keySplines="0.1,0.2,0.3,1" calcMode="spline" repeatCount="indefinite"&gt;&lt;/animate&gt;
        &lt;animate attributeName="stroke-opacity" begin="-1s" dur="3s" values="0;.3;.3;0" repeatCount="indefinite"&gt;&lt;/animate&gt;
      &lt;/circle&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>