infowindow problem with polylines

2,762 views
Skip to first unread message

sb

unread,
May 27, 2010, 3:31:42 AM5/27/10
to Google Maps JavaScript API v3
I am trying to get an infowindow open on the click of a polyline.

The event is being triggered but I am unable to get the infowindow to
display. I have no trouble doing this with a marker so there must be
something slightly different I am missing.

Here is an example of what I am trying to do
http://srsz750.appspot.com/api3/polyline-simple.html

Davide Cremonesi

unread,
May 27, 2010, 4:43:20 AM5/27/10
to google-map...@googlegroups.com
Hi there,
I see some points you could correct:

   google.maps.event.addListener(flightPath, 'click', function(event) {
     infowindow.content = "x";
     infowindow.position = event.latLng;
     infowindow.open(map);//,flightPath);
   });

1) the callback function must have an "event" argument, otherwise it will be undefined
2) the property of event is latLng and not latlng (note the upperCase)
3) the flightPath is not a good MVCObject for the infoWindow.open function. Maybe you could use a point of the path

Hope it helps,
Cheers
Davide


2010/5/27 sb <shan...@gmail.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.


Davide Cremonesi

unread,
May 27, 2010, 6:19:19 AM5/27/10
to google-map...@googlegroups.com
The definitive solution to your problem is to extend the Polyline class defining the getPosition method.

This is a very simple implementation which returns the first point,

    google.maps.Polyline.prototype.getPosition = function() {
        return this.getPath().getAt(0);
    }

maybe someone wishes to write a more sophysticated algoritm to compute the central point of the line or the centroid of its enclosing polygon or whatever. It won't be that easy, but is a well known GIS algorithm.

Cheers, Davide

PS The same is true for Polygon.


2010/5/27 Davide Cremonesi <dvd...@gmail.com>

sb

unread,
May 27, 2010, 11:38:37 AM5/27/10
to Google Maps JavaScript API v3
Hi Davide,

Many thanks for the excellent response, it looks like it has solved
the problem.

I thought about computing the central point of the line but it is
going to be unknown as to the zoom level of the user, or which part of
the line/route they are clicking on. It is probably easier to show the
window where the click event has occurred as it is trapped and certain
to be on the polyline regardless. However if the infowindow is
activated externally some level of calculation it will have to occur.

Thanks again,
sb

On May 27, 6:19 pm, Davide Cremonesi <dvd....@gmail.com> wrote:
> The definitive solution to your problem is to extend the Polyline class
> defining the getPosition method.
>
> This is a very simple implementation which returns the first point,
>
>     google.maps.Polyline.prototype.getPosition = function() {
>         return this.getPath().getAt(0);
>     }
>
> maybe someone wishes to write a more sophysticated algoritm to compute the
> central point of the line or the centroid of its enclosing polygon or
> whatever. It won't be that easy, but is a well known GIS algorithm.
>
> Cheers, Davide
>
> PS The same is true for Polygon.
>

> 2010/5/27 Davide Cremonesi <dvd....@gmail.com>


>
>
>
> > Hi there,
> > I see some points you could correct:
>
> >    google.maps.event.addListener(flightPath, 'click', function(event) {
> >      infowindow.content = "x";
> >      infowindow.position = event.latLng;
> >      infowindow.open(map);//,flightPath);
> >    });
>
> > 1) the callback function must have an "event" argument, otherwise it will
> > be undefined
> > 2) the property of event is latLng and not latlng (note the upperCase)
> > 3) the flightPath is not a good MVCObject for the infoWindow.open function.
> > Maybe you could use a point of the path
>
> > Hope it helps,
> > Cheers
> > Davide
>

> > 2010/5/27 sb <shaneb...@gmail.com>


>
> > I am trying to get an infowindow open on the click of a polyline.
>
> >> The event is being triggered but I am unable to get the infowindow to
> >> display. I have no trouble doing this with a marker so there must be
> >> something slightly different I am missing.
>
> >> Here is an example of what I am trying to do
> >>http://srsz750.appspot.com/api3/polyline-simple.html
>
> >> --
> >> 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>

sb

unread,
Jun 14, 2010, 3:34:21 PM6/14/10
to Google Maps JavaScript API v3
Something of a workaround;
I can get the multiple infowindows with multiple markers working fine.
Getting a single infowindow to appear on a polyline(where it is
clicked) is fine but the data is static. The problem is with multiple
data.

http://srsz750.appspot.com/api3/polylines-multiple.html

google.maps.event.addListener(polylineplot, 'click',
(function(event,index){
return function(){
infowindow.content = polylineArray[index].text;
infowindow.position = event.latLng
infowindow.open(map);
};
})(event,i));
polylineplot.setMap(map);

The object being passed is a polyline so there is no single latLng
location. My best guess at a workaround would be to collect the coords
from the mousemove event on the map to determine the mouse location.
If anyone has a better idea at how to do this I would be happy to hear
it.

The polylines work in chrome, not working in firefox....yet.
Reply all
Reply to author
Forward
0 new messages