Polylines widths and click events

2,775 views
Skip to first unread message

Marc Lacoursière

unread,
Mar 2, 2010, 9:08:12 PM3/2/10
to Google Maps JavaScript API v3
Hello!


I have a mapping application that draws polylines having a width of 2
pixels. My current goal would be to allow users to select them easily.
Here is how I register the click events:

google.maps.event.addListener(path, 'click', function() {
Ext.Msg.alert('click on track');
});

It's working very well, except that the user has to click precisely on
the little line to make it work. As a programmer, I can consider
myself as a power clicker, but I sometimes have a hard time to aim
effectively. That's far from being user friendly.

Is there a way I could still draw thin lines but have a wider click
area?


Thank you very much, I love the new API!

Marc Lacoursière
RooSoft Computing inc.

Ben Appleton

unread,
Mar 2, 2010, 9:30:35 PM3/2/10
to google-map...@googlegroups.com
Hi Marc,

I suggest rendering a thicker, virtually-transparent polyline underneath.  If you set strokeOpacity to 0.01 and strokeWeight to eg. 5, the line should be clickable but not visible.  I haven't tried this though, so I'd be interested to hear if this works for you.

Cheers
Ben

2010/3/3 Marc Lacoursière <ma...@roosoft.com>

--
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 google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Marc Lacoursière

unread,
Mar 2, 2010, 9:48:07 PM3/2/10
to Google Maps JavaScript API v3
I have tried it at 25 strokeWeight... it works very well for now.


var path = new google.maps.Polyline({
path: trackpoints,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

path.setMap(map);

var widePath = new google.maps.Polyline({
path: trackpoints,
strokeColor: "#FF0000",
strokeOpacity: 0.01,
strokeWeight: 25
});

widePath.setMap(map);

google.maps.event.addListener(widePath, 'click', function() {


Ext.Msg.alert('click on track');
});


Thanks Ben!


On Mar 2, 9:30 pm, Ben Appleton <apple...@google.com> wrote:
> Hi Marc,
>
> I suggest rendering a thicker, virtually-transparent polyline underneath.
>  If you set strokeOpacity to 0.01 and strokeWeight to eg. 5, the line should
> be clickable but not visible.  I haven't tried this though, so I'd be
> interested to hear if this works for you.
>
> Cheers
> Ben
>

> 2010/3/3 Marc Lacoursière <m...@roosoft.com>


>
>
>
> > Hello!
>
> > I have a mapping application that draws polylines having a width of 2
> > pixels. My current goal would be to allow users to select them easily.
> > Here is how I register the click events:
>
> > google.maps.event.addListener(path, 'click', function() {
> >    Ext.Msg.alert('click on track');
> > });
>
> > It's working very well, except that the user has to click precisely on
> > the little line to make it work. As a programmer, I can consider
> > myself as a power clicker, but I sometimes have a hard time to aim
> > effectively. That's far from being user friendly.
>
> > Is there a way I could still draw thin lines but have a wider click
> > area?
>
> > Thank you very much, I love the new API!
>
> > Marc Lacoursière
> > RooSoft Computing inc.
>
> > --
> > 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
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>

Ben Appleton

unread,
Mar 2, 2010, 9:54:07 PM3/2/10
to google-map...@googlegroups.com
Great to hear it worked!

2010/3/3 Marc Lacoursière <ma...@roosoft.com>
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages