Google Maps Directions using 1-2-3 instead of A-B-C

Question

I'm using the Google Maps API on Google Maps.

The thing is that, It shows me several stations throughout the path, labeling them as A-B-C-D...Z, but I need to change it as 1-2-3-4-..99,

Here is my code;

directionsService.route({
    origin: $( "#input-directions-start-point" ).val(),
    destination: $( "#input-directions-end-point" ).val(),
    waypoints: waypts, //other duration points
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      console.log(response);
    } else {
      vts.alertDialog( window.localization.error,
        window.localization.error_direction_calculate + ": " + status,
        BootstrapDialog.TYPE_DANGER);
    }
  });

Here is the Screen Shot;

Thanks in Advance

And what have you tried? Your code doesn't show an attempt to replace the default markers. — MrUpsidown, Jun 14 '16 at 10:12
I dont have any idea to solve. API does not support the feature — NewPHPer, Jun 14 '16 at 10:37
The `DirectionsRendererOptions` has a `suppressMarkers` property. See https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions. If you have your different waypoints coordinates, I suppose you could place your own markers instead of the default ones. — MrUpsidown, Jun 14 '16 at 11:42

score 6 · Accepted Answer · edited Jun 14 '16 at 12:34

google.maps.DirectionsRendererOptions has property suppressMarkers which when you set to true, will only render the path but not markers.

You can then render the markers yourself using for example google.maps.Marker, which has label attribute using which you can specify the label inside the marker, which can be for example a number (You can also create your own very custom marker by extending google.maps.OverlayView class, or use RichMarker library). The position of the markers on route can be parsed from response object of directionsService.

More in docs.

Working example:

function init(){
    directionsService = new google.maps.DirectionsService();

    var pos = new google.maps.LatLng(41.218624, -73.748358);
    var myOptions = {
        zoom: 15,
        center: pos,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);
    directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true});

    directionsService.route({
        origin: "New York",
        destination: "Chicago",
        waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
   var my_route = response.routes[0];
            for (var i = 0; i < my_route.legs.length; i++) {
                var marker = new google.maps.Marker({
                    position: my_route.legs[i].start_location,
                    label: ""+(i+1),
                    map: map
                });
            }
            var marker = new google.maps.Marker({
                position: my_route.legs[i-1].end_location,
                label: ""+(i+1),
                map: map
            });
        } else {
            vts.alertDialog( window.localization.error,
                window.localization.error_direction_calculate + ": " + status,
                BootstrapDialog.TYPE_DANGER);
        }
    });

}

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="init()">
  <div id="map" style="height:400px; width:500px;"></div>
</body>

If all you do is turning my comment into an answer, then at least do it correctly. — MrUpsidown, Jun 14 '16 at 12:20
@MrUpsidown i never saw your comment. Took me at least 20 minutes to write this answer, you must have written it in that period. Why do you think you are the only one who can come up with this? I did this in my projects many times. It's really ugly of you to downvote just for that. Please state the problem you have with my answer at least, if any and don't downvote just because of your prejudice. — Matej P., Jun 14 '16 at 12:24
I don't think I am the only one who can come up with this. But the first part of your answer looked almost like a copy/paste of my comment and therefore, yes, I downvoted it, not because you posted it as an answer but because there was no mention of my comment in your answer. Now if you say you didn't see it, let's assume this was a coincidence. You got your points back. — MrUpsidown, Jun 14 '16 at 12:33
I thank you for both. I have another thing, when I change the pinned points locations, the direction does not change. Do you have any idea about it ? Thank you — NewPHPer, Jun 14 '16 at 14:07
I am not sure what do you mean. How do you change the locations, what do you mean by "direction does not change"? — Matej P., Jun 14 '16 at 15:33
I asked another question, here is the link http://stackoverflow.com/questions/37827746/suppressmarkers-and-draggable-for-directionsrendereroptions-google-maps-api — NewPHPer, Jun 15 '16 at 06:34
Thanks! I combined this with removemarkers function shown here: https://stackoverflow.com/a/16483857 to be able to redraw. — Nikhil VJ, Aug 03 '18 at 11:23

Google Maps Directions using 1-2-3 instead of A-B-C

1 Answers1

Linked