[Google Maps API v3] SVG Animated Polyline Icon disappears under map tiles

[Ben Murphy]

Hi all,

 I have a weird problem where an animated polyline icon disappears (goes 
under) the map. Link is:

http://ta-map.uat-for.com/

Steps to reproduce:
Select 'Flying Times'
Select a 'From' airport (like Adelaide)
Select a 'To' airport (like Brisbane).

Once selected, the polyline will display a yellow plane icon which animates 
along the flight path between the two locations.

I'm using the animation function from the Google sample 
(https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate
 
) and the following icon and polyline:

var planeSymbol = {
                    path: 'm 362.985,430.724 -10.248,51.234 62.332,57.969 
-3.293,26.145 -71.345,-23.599 -2.001,13.069 -2.057,-13.529 -71.278,22.928 
-5.762,-23.984 64.097,-59.271 -8.913,-51.359 0.858,-114.43 -21.945,-11.338 
-189.358,88.76 -1.18,-32.262 213.344,-180.08 0.875,-107.436 7.973,-32.005 
7.642,-12.054 7.377,-3.958 9.238,3.65 6.367,14.925 7.369,30.363 0,106.375 
211.592,182.082 -1.496,32.247 -188.479,-90.61 -21.616,10.087 
-0.094,115.684',
                    //path: google.maps.SymbolPath.CIRCLE,
                    scale: 0.0700,
                    //scale: 13,
                    fillColor: '#ffcc00',
                    fillOpacity: 1,
                    strokeColor: '#231F20',
                    strokeOpacity: 1,
                    strokeWeight: 1
                };

this.flightPlane = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    geodesic: false,
                    strokeOpacity: 0,
                    strokeWeight: 0,
                    icons: [
                        {
                            icon: planeSymbol,
                            offset: '100%'
                        }
                    ]
                });

 Map.prototype._animatePlane = function (line) {
                var count = 0;
                window.setInterval(function () {
                    count = (count + 1) % 1000;
                    var icons = line.get('icons');
                    icons[0].offset = (count / 10) + '%';
                    line.set('icons', icons);
                }, 20);
            };

                this._animatePlane(this.flightPlane);

                this.flightPlane.setMap(this._map);

I've tried in different browsers, with different scales and different 
symbols (like google.maps.SymbolPath.CIRCLE or FORWARD_OPEN_ARROW) and I 
get the same behaviour.

Has anyone come across this problem before?

Many thanks in advance,
Ben



-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.