Static navigation path snapshot from Google Map API

Ever want Uber like snap shot path history in the email? I found a way to perform just that. The method requires to make a REST call to Direction API then use the “overview_polyline -> points” object as query key for the snapshot’s link.

  1. Get browser API key from google developer’s console
  2. You will have to enable 2 Google API
    1. Google Map Direction API
    2. Google Map Javascript API
  3. Make a REST call using Google Map Direction API
    1. Rest call will contain 3 major information as query keys
      1. origin=<lat,lng>
      2. destination=<lat,lng>
      3. key=<browser api key>
    2. Here is an example of the direction call:,-122.084197&destination=37.616541,-122.384304&key=<Your API Key>
    3. The response JSON will consist routes[x] ->overview_polyline -> points
  4. Using the newly acquires “points” object, construct the link for the static map snapshot using Google Map Javascript API.
    1. There are few query keys that will be required to display the map accordingly.
      1. size=<width x height>
      2. markers=<markerStyles|markerLocation1| markerLocation2|…>
      3. path=<weight|color|enc:<points object from 1st REST CALL>|….>
      4. key=<browser api key>
    2. The end result of the url format will be similar to this×400&markers=size:mid|color:green|37.421020,-122.084197&markers=size:mid|color:red|37.616541,-122.384304&path=weight:3|color:blue|enc:<points>&key=<Your API Key>


Example Static Image:

Posted on May 21, 2017, in Education and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: