Polyline mouseover event to display some sort of message box or tooltip

4,112 views
Skip to first unread message

CSharp

unread,
Jul 1, 2010, 5:56:47 PM7/1/10
to Google Maps JavaScript API v3
I have a map in which the polylines for any given vehicle route is
displayed. These polylines can all display at once. I want to be
able to mouseover a polyline and have some sort of div box or tooltip
info box popup (sort of like markers) where I can show what route is
being hovered over.

I'm currently using the Google Maps Javascript API v3.0 and it doesn't
seem to show anything. I tried changing the polyline color as well
and nothing seems to show. The only thing that worked is if I do an
alert box call.

eg:

PolylineMouseEvent : function(polyline)
{ google.maps.event.addListener(polyline, "mouseover", function()
{polyline.strokeColor = "#000000"; alert(polyline.strokeColor);});
},

I want to be able to do something as what this website has done.
Check out the routes when you hover over them.

<<http://dev4.mapgears.com/fcmq2009/>>

Thanks

Rossko

unread,
Jul 2, 2010, 6:12:32 AM7/2/10
to Google Maps JavaScript API v3
> I'm currently using the Google Maps Javascript API v3.0 and it doesn't
> seem to show anything.

We can't see anything at all. A link to your problem page would help,
rather than a link to someone else's working example. You've looked
at that already, and it won't tell us anything about what you are
doing differently.

It might be a scope or closure issue, but there is not enough context
in your snippet to tell.

William

unread,
Jul 2, 2010, 1:09:34 PM7/2/10
to Google Maps JavaScript API v3
On Jul 2, 7:56 am, CSharp <aliquis.igno...@gmail.com> wrote:

> eg:
>
>  PolylineMouseEvent : function(polyline)
> {       google.maps.event.addListener(polyline, "mouseover", function()
> {polyline.strokeColor = "#000000"; alert(polyline.strokeColor);});
>
> },
>

check out this demo page for how to change the polyline color on
mouseover and mouseout, using the setOptions function on the
polyline. This is because you can't directly change values on MVC
objects.

http://www.william-map.com/20100702/3/polyline.htm

...

CSharp

unread,
Jul 2, 2010, 1:10:02 PM7/2/10
to Google Maps JavaScript API v3
I've found out why the event works but doesn't show the stroke color
when there is a mouse over on the polyline. Here's the code that
works:

google.maps.event.addListener(currentPolyline, "mouseover",
function(){ currentPolyline.setOptions({strokeColor:
hilitedLineColor, strokeOpacity: .8});});

google.maps.event.addListener(currentPolyline, "mouseout",
function(){ currentPolyline.setOptions({strokeColor:
originalPolylineColor, strokeOpacity: originalPolylineOpacity});});


What's different is that the polyline's options are set with the
setOption() method (by accessing the JSON properties within the
polyline) rather than setting the attributes directly. This is rather
inconsistent with the Marker objects in which you can access the
properties of the marker object directly.

William

unread,
Jul 2, 2010, 8:41:41 PM7/2/10
to Google Maps JavaScript API v3


On Jul 3, 3:10 am, CSharp <aliquis.igno...@gmail.com> wrote:
> I've found out why the event works but doesn't show the stroke color
> when there is a mouse over on the polyline.  Here's the code that
> works:
>
> google.maps.event.addListener(currentPolyline,                                                                                  "mouseover",
>                                                                                         function(){ currentPolyline.setOptions({strokeColor:
> hilitedLineColor, strokeOpacity: .8});});
>
> google.maps.event.addListener(currentPolyline,                                                                                  "mouseout",
>                                                                                         function(){ currentPolyline.setOptions({strokeColor:
> originalPolylineColor, strokeOpacity: originalPolylineOpacity});});
>
> What's different is that the polyline's options are set with the
> setOption() method (by accessing the JSON properties within the
> polyline) rather than setting the attributes directly.  This is rather
> inconsistent with the Marker objects in which you can access the
> properties of the marker object directly.
>
with Marker there's a full range of set() and get() methods for each
property, but are you using those methods like getFlat() and setFlat()
or accessing them directly like marker.flat?

The doco doesn't specify any properties for Marker, even though on
inspection in Firebug you can see properties like title, map, position
and visible. If they aren't documented then a future version of the
API might hide these properties.

for PolyLine you could also use the MVCObject methods for set() and
get() like this:

currentPolyline.set('strokeColor', hilitedLineColor);
currentPolyline.set('strokeOpacity', 0.8);

Reply all
Reply to author
Forward
0 new messages