Display Label for Each Waypoint Pin on Google Map API

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?

1 Answers

Answers 1

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.net/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.net/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!

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati