How to get onclick event of marker generated by getroute

Question

In this jsfiddle is simplified version of my js: http://jsfiddle.net/Drecker/2m4kvxb8/4/ Note that interesting part of the jsfiddle is only showRoute method. And method showMarker only shows desired behavior on normal marker.

Basically I generate a route via gmap3 getroute with some waypoints. After clicking on a waypoint I need to open a small infobox with more custom information of that point - so basically somehow get onclick event of such waypoint (with some identification of that waypoint so I would be able to get proper information). I'm able to achieve desired behavior on a separate marker (as you can see in the jsfiddle - that's the fully functional separate marker on the top left), but not on the markers generated by directionrenderer.

Furthermore please note that my waypoints have stopover: false and such markers for some reason ignore (some) options like title, as you can see in jsfiddle.

Any help is very appreciated - I've tried several things none of them works.

Have you seen [this](http://stackoverflow.com/questions/6630341/detect-waypoint-click-on-directionsrenderer-marker-in-google-maps-v3) — Brett Gregson, Sep 25 '14 at 08:58
@eskimo - I have not, I tried to google my problem, but apparently not hard enough... — Drecker, Sep 25 '14 at 10:35
^ I remembered reading it before but I still struggled to find it — Brett Gregson, Sep 25 '14 at 11:15

ajitksharma · Answer 1 · 2014-09-25T09:08:45.037

Hope you are using the google APIs library some version, in case something like this

  <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places,geometry" type="text/javascript"></script>

You have one div space to show the map, say

<div id="map" style="width: 700px; height: 600px;"></div>

So you can use this for adding listener on markers

//location is an array variable where you store your co ordinates
//code to show map
var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
//adding listener
var marker,i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i].city);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

where

marker is the varible which will be something like this,

 //adding marker
 for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
                    map: map
                });

Hope from above you got some idea, might be helpful for you with your problem

score 1 · Accepted Answer · answered Sep 25 '14 at 10:06

There is no such option, according to the documentation and a lot of similar questions here on the stackoverflow, you can't bind click action to waypoints.

I have a workaround for that problem. The main idea is to add markers instead of waypoints and change their icon. Marker has much more options than waypoint. So I removed waypoints and added markers. Note that you have to be much more precise when adding marker's location

options without waypoints:

options: {origin: {lat:49.9, lng: 14.9},
          destination: {lat: 50.1, lng: 15.1},
          travelMode: google.maps.DirectionsTravelMode.DRIVING
         },

added markers with a new icon and click event:

marker:{
    values:[
      {latLng:[49.96485, 14.88392], data:"Waypoint1", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}},
      {latLng:[49.97730, 14.88185], data:"Waypoint2", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}}
    ],
    options:{
      draggable: false
    },
    events:{
      click: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker, 
              options:{content: context.data}
            }
          });
        }
      }
    }
  }

Here is my workaround for that problem : DEMO

Thanks for answer, though I'm little disappointed that there is no cleaner solution — Drecker, Sep 25 '14 at 10:34

How to get onclick event of marker generated by getroute

2 Answers2