title: How to get polyline from Google Maps Directions Api
body: <p>I'm trying to draw a <a href="/questions/tagged/polyline" class="post-tag" title="show questions tagged &#39;polyline&#39;" rel="tag">polyline</a> using the Google Maps Directions Api, but how do I use the JSON values to make this, because in the api, there is a lot of lat and long and polylines.points like this:</p>
  
  <blockquote>
    <p>cxwnFtdct@JEVGLCR?PDTFNHTNNNPJPDRDN?JCHCv@i@VQTK`CkF</p>
  </blockquote>
  
  <p>and I don't know which one should I use, can anyone help me :)</p>
  
  <pre><code>{
    geocoded_waypoints: [
      {},
      {}
    ],
    routes: [
      {
        bounds: {
          northeast: {
            lat: 39.2846595,
            lng: -8.7036795
          },
          southwest: {
            lat: 38.7223249,
            lng: -9.1393372
          }
        },
        copyrights: "Dados do mapa ©2017 Google, Inst. Geogr. Nacional",
        legs: [
          {
            distance: {},
            duration: {},
            end_address: "Lisboa, Portugal",
            end_location: {
              lat: 38.7223249,
              lng: -9.1393372
            },
            start_address: "Santarém, Portugal",
            start_location: {
              lat: 39.2846595,
              lng: -8.7049071
            },
            steps: [
              {
                distance: {},
                duration: {},
                end_location: {
                  lat: 39.2822117,
                  lng: -8.7036403
                },
                html_instructions: "Siga &lt;b&gt;sul&lt;/b&gt; em direção a &lt;b&gt;N3&lt;/b&gt;",
                polyline: {
                  points: "cxwnFtdct@JEVGLCR?PDTFNHTNNNPJPDRDN?JCHCv@i@VQTK`CkF"
                },
                start_location: {
                  lat: 39.2846595,
                  lng: -8.7049071
                },
                travel_mode: "DRIVING"
              },
              {},
            ],
            traffic_speed_entry: [],
            via_waypoint: []
          }
        ],
        overview_polyline: {   points:"cxwnFtdct@dAQlAf@fAf@|Aq@l@]pCcFhCjA|LfJlAT~@IpDi@jAb@f@HXi@t@kBhBeBx@Qz@z@dClHzFpW`H|RvTpj@`AxAdBdAnAXhB?fBk@rAcAnG_HhCgAjAKrATbA`Al@lBHnAc@rFgBhIkCxMBfIlBvHnBtCnB|AnEdCrJxFj@fB@h@OhAgCtHGfCl@jAlA\jE]tDBzBb@tLxFtK~E`d@hShIzEtDhDxDrEfDpFlFjNvDtRdDjThF`TzH`QhEhG|EvFhL`JpJtE|LpEdOpFjOzGlPfJlHzE~NjLfQvPfP|RtHrKxDjGfI|NdHbOvGjPfCbHpCtIvJh_@vG|[|CtNvFvSvE~MfI|QzLbTfNxQbKlKrRzP|NnNvNlQjIzMnLfV`T|h@nDbHhIdMxFjH~JrMnEfHzIrQfHvOtEjI|MnQfNzP`FzI~EnLrKp[nDlHvErHzL~MbRbM`EjCjFxEtRnX|D~EjIhI~WrRxGlGdFnG`JjNxHzKfTxVfKfRfMbRlErHtBlFxIjYvHnPpBtFxF~WpCjHjGhJfDzClF~CnDlArDl@pC\vHXvX[lOaB|GcBdFqBxQwJbDmAxE_ApJ_@jEXtItBrQ~EbQbDlUfBpMfA|IxCbF`DhGlGnJjKtJrF`SpFbRnDdUxAbGrAlEjBnFpDtNnMfGlE~[lTbRdQjTpUxH`GjHfEnGlC`O|DrUxEnEzAfFrBnSpIjPnDxSlAf\lAl~@hDzRrAjOpBvKrBrQtEv^pM``@rPrR|JxSdMlGnGfGtH~HxFdFlBtGfApGp@bG|AnHxD|FzFrH`L~FvH|HrFrFtBtFjA~Mt@pHR|FhA`IfDpEbDzFxGrHrKhEtErF`EnS`MzMvItSdUfF~DtE~B|SrInEnBzDtCxN`QpQfVtQ~Yjn@~fAnK`RvLlRzEjF|GlFrc@vUfRjKfIvGxDhEjIxKdN~T`L~MrFvE~LhIlp@fb@xCtBzFtFbEzFbDrGhH`TfF|JnGfHzEdD|UdIpTdHtKtFj]nUrEzC~[pTfLfG|EbB~KfCnTvDpmAxSzs@~LhOfDzOdFfOxGdY`O`k@zYnVzMlK|HrFjFbXj[rCbCvDfB|FfBbD^xRBlb@nBrIdArJvDfD|B|FzFvFzHnCbIDrCk@dA_A_@q@mHz@sAvAJ^f@r@n@x@UR_@fBGjET`S~@ro@pCpXpAfFp@dEhCnGtE@HXl@n@H^W|ASpShAbZxAtPp@~SjAzGZKdDStBd@x@dC@nEVz@HtAp@b@\OZ|AbBxDnFJf@"
        },
        summary: "A1",
        warnings: [],
        waypoint_order: []
      }
    ],
    status: "OK"
  }
  </code></pre>