Display label for each contact point in the Google Maps API

Question

I am 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 contact with a tag, but this is when I drop each pin manually. How can I do this for referral?

Answer 1

If you want to access tokens from the DirectionsRenderer request, which requires hacking, because there is no official way to do this using the google map api.

There is a way, here is an example that I did: 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 to completely control the markers. If you suppress markers, you have many possibilities, you can use markers from libraries such as markerLabel or RichMarker (use the dom element for the marker!)

Here is an example with a Label marker, you click anywhere on the map, and the marker appears with a label with a 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) [...] 

easier to do, more nice to see, more fun!