Google Maps API Gradient Polyline

If you’re working on a project using Google Map API and you want to draw a multi colored or gradient polyline you’ll find out that its not possible using pure Google Maps API. How ever there are some ways you can still draw a gradient polyline on Google map.

In this article, we will learn how you can make a multi-colored or gradient polyline using Google Maps API.

First Things First!

  1. Setup your project to use Google Maps API. It can be javacript API or the Android API.
  2. Your route path or coordinates which you will use to draw the polyline needs to be in a specific format which you will learn in next step how to do it.

Creating Polyline Coordinates Array

There is no direct implementation available for showing a gradient or multi colored polyline on Google Maps. A single polyline must have one color. However you can modify your coordinates to create multiple polylines having multiple colors based on some conditions.

Here are my rules:

  1. If a vehicle is moving below 85 Km/h speed, we’ll draw the route with blue color.
  2. If the vehicle is moving above 85 Km/h speed, we’ll consider that as high speed and show that route part with red color.

My current logic works on the concept that all coordinates are available initially so we can easily group them by above rules.

Your coordinates array will initially be like this:

[
	{
		latitude: ...,
		lontitude: ...,
		speed: 10
	},
	{
		latitude: ...,
		lontitude: ...,
		speed: 30,
	},
	{
		latitude: ...,
		lontitude: ...,
		speed: 86,
	},
	{
		latitude: ...,
		lontitude: ...,
		speed: 90,
	},
]

An array of coordinates having lat/lng keys and speed key. Now we need to group them by speed and add a color tag. We can see that two points here are below 85 km/h and two points are above 85 km/h. So that clearly makes two group or two polylines. We can change our array to this:

[
	{
		Item1: 'Blue',
		Item2: [
			{
				latitude: ...,
				lontitude: ...,
				speed: 10
			},
			{
				latitude: ...,
				lontitude: ...,
				speed: 30,
			},
		]
	},
	{
		Item1: 'Red',
		Item2: [
			{
				latitude: ...,
				lontitude: ...,
				speed: 86,
			},
			{
				latitude: ...,
				lontitude: ...,
				speed: 90,
			},
		]
	}		
]

Item1 Represents the color of the polyline
Item2 Represents the sub array to be used to draw the polyline.

But this creates a small problem. Notice two groups can be used to draw two polylines but they won’t be connected because lat/lng of both groups can be different completely. So we need to add a third group in between them which will have two coordinates connecting the two polylines. We can do this in two ways:

  1. We can take the last coordinate of first group and take the first coordinate of the second group and insert them as a new group having color of either previous or next group.
  2. By adding the first point of the second group at the end of the first group or vice versa.

Both will work but I think second option will perform better as their will be lesser polylines to draw on map. Our coordinates array will now look like this:

[
	{
		Item1: 'Blue',
		Item2: [
			{
				latitude: ...,
				lontitude: ...,
				speed: 10
			},
			{
				latitude: ...,
				lontitude: ...,
				speed: 30,
			},
			{
				latitude: ...,
				lontitude: ...,
				speed: 84,
			},
		]
	},
	{
		Item1: 'Red',
		Item2: [
			{
				latitude: ...,
				lontitude: ...,
				speed: 86,
			},
			{
				latitude: ...,
				lontitude: ...,
				speed: 90,
			},
		]
	}		
]

Drawing Multicolored Polyline on map

Now the main thing is done, we just need to draw that polyline on map.

Leave a Reply

Your email address will not be published. Required fields are marked *