CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Sankar V
Sankar V

Reputation: 4128

Google Map Directions Service API 'Drag to change route' text change

I've successfully implemented google map direction service api : https://developers.google.com/maps/documentation/javascript/directions with 'draggble' option enabled. Is it possible to change the text label of Drag button (screenshot attached) on hovering the route ? At present it says: 'Drag to change route'. I need to modify it. I checked the documentation: https://developers.google.com/maps/documentation/javascript/reference, but couldn't find anything for this.

The current code is similar to: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable

Please help me. Thanks in advance!

enter image description here

Update: I just got a down vote for: "There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.". The code is available in the provided url and I think there can be only one solution available using google map api. If there's any additional information needed, please add a comment.

Upvotes: 1

Views: 2440

Answers (1)

MKiss
MKiss

Reputation: 766

Probably my answer will be downvoted, but maybe it will be useful for you. Let's say it's just an idea. So you may change the tooltip of the route after the direction has been changed.

    directionsDisplay.addListener('directions_changed', function() {
        directionsDisplay.gd.b.setTitle('This is your new tooltip for the route.');
    });

But unfortunately at the time of the directions_changed event there are no markers yet, so somehow you should delay setting their title:

      for (var i = 0; i < directionsDisplay.b.G.length; i++){
        directionsDisplay.b.G[i].setTitle('Marker ' + i + ' tooltip');
      }

UPDATE: A more general code:

    directionsDisplay.addListener('directions_changed', function() {
        setRouteTitle(directionsDisplay, 'The new tooltip');
    });

    function setRouteTitle(dirsDispl, newTitle){
        var ddObjKeys = Object.keys(dirsDispl);
        for (var i = 0; i < ddObjKeys.length; i++){
            var obj = dirsDispl[Object(ddObjKeys)[i]];
            var ooObjKeys = Object.keys(obj);
            for (var j = 0; j < ooObjKeys.length; j++){
                var ooObj = obj[Object(ooObjKeys)[j]];
                if ((ooObj) && (ooObj.hasOwnProperty('title')) && (ooObj.hasOwnProperty('shape')) && (ooObj.shape.type == 'circle')){
                    ooObj.setTitle(newTitle);
                }
            }
        }
    };

Hope this helps.

Upvotes: 1

Related Questions