CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
theazureshadow
theazureshadow

Reputation: 10059

Detect waypoint click on DirectionsRenderer marker in Google Maps v3

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).

Upvotes: 5

Views: 6077

Answers (3)

George Cosmin Taschina
George Cosmin Taschina

Reputation: 66

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.

Upvotes: 0

bwrega
bwrega

Reputation: 31

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.

Upvotes: 1

lashleigh
lashleigh

Reputation: 2565

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.

Upvotes: 5

Related Questions