Google Map Marker pulse animation?

Question

I wonder is there any way to make Google Map Marker to pulse? Like here: http://plebeosaur.us/etc/map/

Answer 1

After checking out the code I noticed that CSS pulsate is used on the demo you provided. It would be nice to see other examples of this.

He uses a static image for the center.

Here is the code to play around with... http://jsfiddle.net/86Ejf/945/

var image = new google.maps.MarkerImage(
    'bluedot_retina.png',
    null, // size
    null, // origin
    new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
    new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);

Answer 2

The link you provide uses pure css to make this animation :

@-moz-keyframes pulsate {
    from {
        -moz-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -moz-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -moz-transform: scale(0.3);
        opacity: 0;
    }
}
@-webkit-keyframes pulsate {
    from {
        -webkit-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
}
/* get the container that's just outside the marker image, 
    which just happens to have our Marker title in it */
#map_canvas div.gmnoprint[title="I might be here"] {
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;
    border:1pt solid #fff;
    /* make a circle */
    -moz-border-radius:51px;
    -webkit-border-radius:51px;
    border-radius:51px;
    /* multiply the shadows, inside and outside the circle */
    -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    /* set the ring's new dimension and re-center it */
    height:51px!important;
    margin:-18px 0 0 -18px;
    width:51px!important;
}


/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*  #map_canvas div[style*="987654"][title] img {*/
    #map_canvas div.gmnoprint[title="I might be here"] img {
        display:none;
    }
    /* compensate for iPhone and Android devices with high DPI, add iPad media query */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
        #map_canvas div.gmnoprint[title="I might be here"] {
            margin:-10px 0 0 -10px;
        }
    }

Can confirm it works on my website when I copy their code and their css