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