I'm trying to add a label for each waypoint along the route, but I'm not quite sure how I should approach it. After doing some research, I understand that you can add a custom pin with label, but that's when I drop each pin manually. How can I do this for direction?

I'm trying to add a label for each waypoint along the route, but I'm not quite sure how I should approach it. After doing some research, I understand that you can add a custom pin with label, but that's when I drop each pin manually. How can I do this for direction?

• javascript
• google-maps-api-3
• label
• google-maps-markers
• map-directions

Share Improve this question Follow asked Sep 12, 2013 at 17:22 juminozjuminoz 3,21877 gold badges3838 silver badges5757 bronze badges 4

• custom markers on results of (multiple) directions request(s) – geocodezip Commented Sep 12, 2013 at 19:18
• I actually ended up suppressing the markers and add them manually since there is no way to get a reference to the pins dropped by direction service. – juminoz Commented Sep 12, 2013 at 19:20
• That is how the linked example works. – geocodezip Commented Sep 12, 2013 at 19:56
• Take a look at stackoverflow./questions/18664480/… to see how you may access the markers created by the DirectionsRenderer – Dr.Molle Commented Sep 12, 2013 at 22:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +25

If you want to get access to markers from DirectionsRenderer request that need a hack because there is not official way to do this from google map api.

There is a way around, here is an example I made: https://jsfiddle/TomKarachristos/cna78jbw/

google.maps.event.addListener(directionsDisplay, 'directions_changed', 
    function() {
        var self = this;
        markersArray = []; //empty the array
        setTimeout(function() { //wait until markers render
          for (var k in self) { //search everything in directionsDisplay
            if (typeof self[k].markers != 'undefined') { //  its that the markers?
              var markers = self[k].markers;
              for (var i = 0; i < markers.length; ++i) {
                markersArray.push(markers[i]);
                markersArray[i].setLabel({ //lets change the label!
                  color: "white",
                  fontSize: "16px",
                  text: i.toString()
                });
              }
            }
          }
          console.log(markersArray); // now markersArray have all the markers 
        }, 0);
      });

But this is not a good solution if you want full control of markers. If you supress the markers you have many possibilities, you can use markers from libraries like markerLabel or RichMarker(use a dom element for marker!)

Here an example with markerLabel, you click anywhere in the map and a marker appear with a label with the distance from the center marker. https://jsfiddle/TomKarachristos/x1zg503m/

[...]
 markerArray[1] = new MarkerWithLabel({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP, //just for fun
    labelContent: "",
    labelClass: "marker-label"
  });
[...]
if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      route = directionsDisplay.getDirections().routes[0];
      markerArray[1].set('labelContent', route.legs[0].distance.value / 1000)
[...]

more easy to make, more nice to see, more fun!