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! On Jul 12, 12:42 pm, CSharp <[email protected]> wrote: > 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 <[email protected]> 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 > > over the last two bus stops on the far right for Route 25 and 26. > > > On Jul 12, 8:54 am, Marx Zeng <[email protected]> wrote: > > > >http://marx-tseng.appspot.com/maps/Polyline_zIndex.html > > > > On 7月12日, 下午9時47分, Marx Zeng <[email protected]> wrote: > > > > > 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 > > > > }); > > > > > }); > > > > > On 7月10日, 上午1時06分, CSharp <[email protected]> wrote: > > > > > > 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-Hidequoted text - > > > > - Show quoted text -- Hide quoted text - > > > - Show quoted text -- Hide quoted text - > > - Show quoted text - -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
