Question

We’re re-writing a Flash application that uses Google Maps into an HTML/CSS/JavaScript with the v3.10. In Flash they used an mx effect to create a pulsating glow of different colors to indicate status.

I’ve been trying to find a way to replicate this in JavaScript, but I haven’t been able to find a solution.
I’ve played around with shadow, but then it’s only a png image. Ideally I’d like to use CSS, or a JavaScript tool, but maybe I could use an animated gif behind the marker?

createMarker = function (mapMarkerVm) {
            var shadow = new google.maps.MarkerImage(
                    '/Content/images/mapIcon_glow.png',
                    new google.maps.Size(36, 52),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(20, 52));
            return new google.maps.Marker({
                title: mapMarkerVm.Title() || "",
                position: new google.maps.LatLng(mapMarkerVm.Latitude() || 0.0, mapMarkerVm.Longitude() || 0.0),
                icon: createMarkerImage(mapMarkerVm.StatusIcon()),
                map: map,
                shadow: shadow,
                draggable: false,
                visible: true
            });
        };

Answer 1

You could use a gif but you must set optimized: false in your marker constructor.

Source:
.gif marker google maps