20

In the JSON output, there is a field "maneuver" within a "step". In this "turn-left", "turn-right", "turn-slight-left", etc. Example is here

Where could I find the definition of the "maneuver" field, and the list of possible values? There is no relevant description here

Thanks in advance

Stephen Kennedy
  • 20,585
  • 22
  • 95
  • 108
user2633218
  • 263
  • 1
  • 2
  • 7
  • You may want to parse it with a library: https://github.com/perezdidac/google-directions-api – Didac Perez Parera Aug 28 '13 at 15:10
  • Here is the image set I found in Web Google Map. You can reference these icons to generate yours. [Link](https://maps.gstatic.com/tactile/directions/text_mode/maneuvers-2x.png) – Shawn Lu Nov 28 '13 at 00:08
  • I prepared an icon set accordingly to @turach answer. Download, extract and simply add .png extension to maneuver name. Contains all 20 icons mentioned above, 32x32 pixels each. https://drive.google.com/open?id=0BxNi09X3k4qpb3A1MFFiempLMWs – adiOx Sep 17 '17 at 15:48

5 Answers5

25

Here is a visual for the lazy ones :)

Can't believe Google did not document this yet...

maneuver contains the action to take for the current step (turn left, merge, straight, etc.).

This field is used to determine which icon to display, and can contain one of the following values:

Google Maps Direction API - Maneuvers

Bolt UIX
  • 5,988
  • 6
  • 31
  • 58
Jason
  • 433
  • 6
  • 19
23

UPD

Believe it or not, but finally they documented it! Please see here.


according to this gmaps-api-issue I think google not in hurry to document this part of api :(

But I can help with this issue at least with following... The "maneuver" field is the short description of step's action. I suppose google's script uses it for applying css classes to direction panel. I noticed that icon for each step depends on css class ".adp-{maneuver_name}". Css file for panel contains 18 classes with that mask and I had extracted list of maneuvers:

  • turn-sharp-left
  • uturn-right
  • turn-slight-right
  • merge
  • roundabout-left
  • roundabout-right
  • uturn-left
  • turn-slight-left
  • turn-left
  • ramp-right
  • turn-right
  • fork-right
  • straight
  • fork-left
  • ferry-train
  • turn-sharp-right
  • ramp-left
  • ferry

During the work I found two additional values of the "maneuver" field, which doesn't have css classes:

  • keep-left
  • keep-right

I can't guarantee fullness of this list, but I used this list in my project and it works properly.

turach
  • 251
  • 1
  • 6
9

when you use directions service, google maps inject some css in your <head>

As of 2015/jun, I've got this code below. It seems google only downloads what it needs to show the directions, so, your results may vary.

Background-image file at the bottom:

.adp-substep .adp-stepicon .adp-maneuver {
        background-size: 19px 630px;
        position: absolute;
        left: 0;
        width: 16px;
        height: 16px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-ferry {
        background-position: 0 -614px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-ferry-train {
        background-position: 0 -566px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-merge {
        background-position: 0 -143px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-straight {
        background-position: 0 -534px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-fork-left {
        background-position: 0 -550px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-ramp-left {
        background-position: 0 -598px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-roundabout-left {
        background-position: 0 -197px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-left {
        background-position: 0 -413px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-sharp-left {
        background-position: 0 0
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-slight-left {
        background-position: 0 -378px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-uturn-left {
        background-position: 0 -305px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-fork-right {
        background-position: 0 -499px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-ramp-right {
        background-position: 0 -429px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-roundabout-right {
        background-position: 0 -232px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-right {
        background-position: 0 -483px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-sharp-right {
        background-position: 0 -582px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-turn-slight-right {
        background-position: 0 -51px
    }

    .adp-substep .adp-stepicon .adp-maneuver.adp-uturn-right {
        background-position: 0 -35px
    }

    .adp-substep .adp-stepicon .adp-maneuver {
        background-image: url(http://maps.gstatic.com/mapfiles/api-3/images/maneuvers.png);
    }
Fernando Fabreti
  • 4,277
  • 3
  • 32
  • 33
3

Just take a look on their SDK

https://github.com/googlemaps/google-maps-services-js/blob/master/src/common.ts line 1132

export enum Maneuver {
    turn_slight_left = "turn-slight-left",
    turn_sharp_left = "turn-sharp-left",
    uturn_left = "uturn-left",
    turn_left = "turn-left",
    turn_slight_right = "turn-slight-right",
    turn_sharp_right = "turn-sharp-right",
    uturn_right = "uturn-right",
    turn_right = "turn-right",
    straight = "straight",
    ramp_left = "ramp-left",
    ramp_right = "ramp-right",
    merge = "merge",
    fork_left = "fork-left",
    fork_right = "fork-right",
    ferry = "ferry",
    ferry_train = "ferry-train",
    roundabout_left = "roundabout-left",
    roundabout_right = "roundabout-right"
}
Wnjklm
  • 67
  • 6
1

Maneuver contains the action to take for the current step (turn left, merge, straight, etc.). This field is used to determine which icon to display, and can contain one of the following values: turn-slight-left, turn-sharp-left, uturn-left, turn-left, turn-slight-right, turn-sharp-right, uturn-right, turn-right, straight, ramp-left, ramp-right, merge, fork-left, fork-right, ferry, ferry-train, roundabout-left, roundabout-right. Values in this list are subject to change

Below link will help you to find all the images https://github.com/opentripplanner/OpenTripPlanner/tree/master/src/client/images/directions

Joyal Clifford
  • 1,212
  • 11
  • 20
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/18170333) – naththedeveloper Dec 06 '17 at 11:11
  • check it @naththedeveloper – Joyal Clifford Dec 06 '17 at 11:24