Google Maps SVG marker with animation

It is not possible to configure this SVG as a marker on Google Maps.

<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">
  <g fill="none" fill-rule="evenodd" stroke-width="1" stroke="black" stroke-opacity="0.3">
    <circle cx="50" cy="50" r="50">
      <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"></animate>
      <animate attributeName="stroke-opacity" begin="0s" dur="3s" values="0;.3;.3;0" repeatCount="indefinite"></animate>
    </circle>
    <circle cx="50" cy="50" r="30">
      <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"></animate>
      <animate attributeName="stroke-opacity" begin="-1s" dur="3s" values="0;.3;.3;0" repeatCount="indefinite"></animate>
    </circle>
  </g>
</svg>
Run codeHide result
+4
source share
1 answer

As indicated in the comment, set optimized: falsethe marker in the parameters.

From docs :

Disable optimized rendering for animated GIFs or PNGs, or when each marker should be presented as a separate DOM element (for advanced use only).

+3
source

Source: https://habr.com/ru/post/1648053/


All Articles