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: https://maps.googleapis.com/maps/api/directions/json?origin=37.421020,-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 https://maps.googleapis.com/maps/api/staticmap?size=400×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:

Advertisements