I wonder is there any way to make Google Map Marker to pulse? Like here: http://plebeosaur.us/etc/map/
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