how to animate google maps api circle?

Question

I have build a pulse animation in CSS3I would like to implement in to marker in google maps api unfortunately it is not possible direct insert in to the map. Is there any option to the CSS3 animation or Is it possible to make google map circle increase and decrease as an animation.

var myCity = new google.maps.Circle({
    center: bigOne,
    radius: 150,
    strokeColor: "#E16D65",
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
    center: smallOne,
    radius: 300,
    strokeColor: "#E16D65",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});

DEMO http://jsfiddle.net/gbqzQ/4/

Answer 1

You can change circle radius using setRadius() method and make animation using setInterval():

    var direction = 1;
    var rMin = 150, rMax = 300;
    setInterval(function() {
        var radius = circle.getRadius();
        if ((radius > rMax) || (radius < rMin)) {
            direction *= -1;
        }
        circle.setRadius(radius + direction * 10);
    }, 50);

See example at jsbin.

Update: Radius on zoom: you have to change it with factor 2. See updated example at jsbin.

Answer 2

-- 2021 solution: --

This may be an old question and answer but is still relevant for the Google Maps API nowadays as of now (2021). Also using svg wasn't as popular back then. Therefore I used the inline style tag to create an animated svg icon that imitates a circle. You can set width and height to your desired requirements and add this as a marker with:

const marker = new google.maps.Marker({
    map: map,
    icon: "/img/marker.svg"
});

SVG:

<svg width="40px" height="40px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <style>
        circle {
            fill: #d2546b;
            stroke: #d2546b;
            stroke-width: 1px;
            stroke-opacity: 1;
        }
        .pulse {
            fill: #7F40E2;
            fill-opacity: 0;
            transform-origin: 50% 50%;
            animation-duration: 2s;
            animation-name: pulse;
            animation-iteration-count: infinite;
        }
        @keyframes pulse {
            from {
                stroke-width: 5px;
                stroke-opacity: 1;
                transform: scale(0.3);
            }
            to {
                stroke-width: 0;
                stroke-opacity: 0;
                transform: scale(2);
            }
        }
    </style>
    </defs>
    <circle cx="50%" cy="50%" r="5px"></circle>
    <circle class="pulse" cx="50%" cy="50%" r="8px"></circle>
</svg>