Blog Archives
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.
- Get browser API key from google developer’s console
- You will have to enable 2 Google API
- Google Map Direction API
- Google Map Javascript API
- Make a REST call using Google Map Direction API
- Rest call will contain 3 major information as query keys
- origin=<lat,lng>
- destination=<lat,lng>
- key=<browser api key>
- 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>
- The response JSON will consist routes[x] ->overview_polyline -> points.
- Rest call will contain 3 major information as query keys
- Using the newly acquires “points” object, construct the link for the static map snapshot using Google Map Javascript API.
- There are few query keys that will be required to display the map accordingly.
- size=<width x height>
- markers=<markerStyles|markerLocation1| markerLocation2|…>
- path=<weight|color|enc:<points object from 1st REST CALL>|….>
- key=<browser api key>
- 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>
- There are few query keys that will be required to display the map accordingly.
Advertisements