title: Extracting Google Map routes as shape
body: <p>We have very simple example of transition route in Web Google Map. Consider <a href="https://www.google.com/maps/dir/40.9003893,-74.1943228/2-22+Taft+Ave,+Woodland+Park,+NJ+07424,+USA/40.898207,-74.1952972/40.8987253,-74.1968851/40.9008121,-74.196019/@40.8994414,-74.1947649,16.25z/data=!4m12!4m11!1m0!1m5!1m1!1s0x89c2fe0b277654c5:0xe2ef2499f02796f6!2m2!1d-74.1953885!2d40.900987!1m0!1m0!1m0!3e2" rel="nofollow noreferrer">following example link</a>. Or image, below. </p>
  
  <p><a href="https://i.stack.imgur.com/1XPRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1XPRz.png" alt="Or this Image"></a>. </p>
  
  <p>My question is, how to get <strong>this shape of the route</strong> with some Map API(maybe not Google)? So I'm trying to make script, where I can insert a lot of points of the destination, and the output should be <strong>the shape of the transition routes</strong>. Even I can make shape with OpenCV, all  what I need, it's just thumbnail of such route. </p>
  
  <hr>
  
  <ul>
  <li>What I have tried so far? It's using Google Map Static API to create thumbnail. However, from the documentation, it's not possible to create such routes representation. By using <code>path</code> field in Static API with same destination points (provided in link above), we would have just connection lines. Example below and <a href="https://maps.googleapis.com/maps/api/staticmap?size=650x300&amp;center=40.8994414,-74.1947649&amp;zoom=16&amp;path=color:0x0000ff%7Cweight:5%7C40.9003893,-74.1943228%7C2-22%20Taft%20Ave,%20Woodland%20Park,%20NJ%2007424,%20USA%7C40.898207,-74.1952972%7C40.8987253,-74.1968851%7C40.9008121,-74.196019&amp;key=AIzaSyBp3qT02RHZ-nFuaB0QPqinrLpdz0kCZGU" rel="nofollow noreferrer">link to the Map Request</a>. </li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/b3cZt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3cZt.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>What about if you put your points in the appropriate order? Let me explain, why order won't help in this case. Check the another <a href="https://goo.gl/maps/DR2UufEDKrv" rel="nofollow noreferrer">example here</a>. Or first image below. Now, lets take those points to the Static Map API. And you will have second image below. Or <a href="https://maps.googleapis.com/maps/api/staticmap?size=650x300&amp;center=40.8994414,-74.1947649&amp;zoom=16&amp;path=color:0x0000ff%7Cweight:5%7C40.8993846,-74.19484%7C48-2%20Garden%20Ave,%20Woodland%20Park,%20NJ%2007424,%20USA%7C40.8994819,-74.1983376&amp;key=AIzaSyBp3qT02RHZ-nFuaB0QPqinrLpdz0kCZGU" rel="nofollow noreferrer">this link to API Request</a>. <strong>So it's not about order</strong>, but behavior (which is obviously, is very different applications).</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/epvAz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/epvAz.png" alt="Another Example"></a></p>
  
  <p><a href="https://i.stack.imgur.com/gH4xD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gH4xD.png" alt="enter image description here"></a></p>