5

In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).

Jon Onstott
  • 13,499
  • 16
  • 80
  • 133
theazureshadow
  • 9,499
  • 5
  • 33
  • 48
  • I'm having the exact same problem right now. Have you found a solution? – lashleigh Jul 31 '11 at 03:49
  • I don't think there is a solution with the current state of the Google Maps API. Someone should submit a feature request. I've thought about a potential workaround, but haven't had the time to pursue it. – theazureshadow Aug 01 '11 at 00:56
  • @lashleigh: This enhancement would allow code to easily be written to solve the problem. Go ahead and star it, if you like: http://code.google.com/p/gmaps-api-issues/issues/detail?id=2141 – theazureshadow Aug 01 '11 at 04:04
  • Thanks, I'll add my name to the list. – lashleigh Aug 01 '11 at 04:54

3 Answers3

5

Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.

It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.

lashleigh
  • 2,555
  • 2
  • 20
  • 28
1

Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:

  1. convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
  2. calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point

I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.

Community
  • 1
  • 1
bwrega
  • 31
  • 2
0

Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.

  1. Create the single markers and assign the a high z-index
    marker = new google.maps.Marker({
      map:map,
      position: new google.maps.LatLng(1.99, 2.99),
    });
    marker.setZIndex(999);
  1. Add a listener to the markers 
google.maps.event.addListener(marker, 'click', function(event){
      alert(marker.title);
    });
  1. And now create the waypoints.
George Cosmin Taschina
  • 11
  • 5