How to show Traffic layer on top of Directions polyline in google maps API

Question

I am using the Javascript API to show a google map with directions (based on user input) along with the traffic layer. it works well, but i cannot figure out a way to show the traffic colors on the relevant polylines above my custom created line. what's the correct way to do this?

Answer 1

Try to use Embed API in directions mode. Details about it you can find it here (Embed API in Direction mode). Here is an example which looks like this.

  <iframe
    width="600"
    height="450"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=indira+nagar+Bangalore&destination=Whitefield+Bangalore&avoid=tolls|highways" allowfullscreen>
  </iframe>

Which will give you below output.

You can generate src URL dynamically for run time source - destination traffic route display.