Polyline zIndex

[CSharp]

Is it possible to put one polyline overlay overtop of the another
polyline that overlaps it when a onmouseover event fires? I tried to
set the strokeOpacity to 1.0 and the zIndex to 900 and the line on the
bottom seems to always mesh the color with the top one.

You can see the example here (select Route 25 and 26 where the lines
overlap in some sections):

http://www.mentoreng.com/testing/public/map2.html

[Marx Zeng]

Try this.

var polyline = new google.maps.Polyline({
path: paths,
strokeColor: "#FF0000",
strokeWeight: 10,
map: map,
zIndex: 100
});

google.maps.event.addListener(polyline, 'mouseover', function(event) {
p1.setOptions({
path: paths,
strokeColor: "#00FF00",
strokeWeight: 10,
zIndex: 300
});
});
google.maps.event.addListener(polyline, 'mouseout', function(event) {
p1.setOptions({
path: paths,
strokeColor: "#FF0000",
strokeWeight: 10,
zIndex: 100
});
});

[Chad Killingsworth]

If memory serves there are several posts related to this and at least
one issue in the tracker that point out that polylines/polygons cannot
change zIndex after drawing.

Chad Killingsworth

[Marx Zeng]

http://marx-tseng.appspot.com/maps/Polyline_zIndex.html

[CSharp]

Interestingly, the only difference between your code and my code (in
terms of setOptions) is that the array of points is set in both the
anonymous function calls for mouseover and mouseout. I put that into
my code and it seems to work in Firefox, Chrome, and Safari. In IE,
if you hover over a line, the line will flicker in and out and then
the mouseout takes effect. For the Markers, it works fine for the
polyline.

Try your code in IE and you'll see the same thing. Any clue on why
this is happening for the polyline mouseover event? I've implemented
this for the http://www.mentoreng.com/testing/public/map2.html. Hover
over the last two bus stops on the far right for Route 25 and 26.

> > >http://www.mentoreng.com/testing/public/map2.html- Hide quoted text -
>
> - Show quoted text -

[CSharp]

It's a bit frustrating. To resolve the issue with IE, I had to remove
the path option in the polyline's setOption method. Setting the
zIndex in that setOption method seems to work fine without the path
option. But then, if I do that, the other browsers such as FireFox,
Chrome, and Safari will not set the zIndex of the polyline to be on
top when even on high zIndexes. So, the only way to do it is to set
the path options for the other 3 browsers is to set the path in the
setOption method of the polyline. Otherwise, for IE browser, you
don't need to because the zIndex will take care of things.

Is there a workaround code or a fix to get this working for all
browsers to look the same for a polyline mouseover?

On Jul 12, 12:07 pm, CSharp <aliquis.igno...@gmail.com> wrote:
> Interestingly, the only difference between your code and my code (in
> terms of setOptions) is that the array of points is set in both the
> anonymous function calls for mouseover and mouseout.  I put that into
> my code and it seems to work in Firefox, Chrome, and Safari.  In IE,
> if you hover over a line, the line will flicker in and out and then
> the mouseout takes effect.  For the Markers, it works fine for the
> polyline.
>
> Try your code in IE and you'll see the same thing.  Any clue on why
> this is happening for the polyline mouseover event?  I've implemented

> this for thehttp://www.mentoreng.com/testing/public/map2.html.  Hover

> > > >http://www.mentoreng.com/testing/public/map2.html-Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -

[Chad Killingsworth]

The issue should be checked after the next release. See Ben's
comments: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/b5f3a60709eb4ca5#

Chad Killingsworth

> > > > >http://www.mentoreng.com/testing/public/map2.html-Hidequoted text -

[CSharp]

Ok, I've got this issue resolved for now. I think it's a workaround
until either Google or all the browsers conform to some sort of
standard for displaying the zIndex of things on the page. The way I
resolved it is to check to see if the navigator.userAgent is a MSIE.
If it is a MSIE browser looking at the map, then set the path in the
setOption of the polyline on mouseover. If not, don't set that
option.

If anyone has a better way of doing this without checking the
navigator.userAgent in javascript, please post your solution here.
Thanks Marx Zeng for starting this off in the right direction.

Thanks!

> > > > >http://www.mentoreng.com/testing/public/map2.html-Hidequoted text -