How to Encode a Polyline in a Google Map

You can use a polyline to draw lines on a map in Google Maps. A polyline is an overlay on a map that's created by connecting line segments in an ordered sequence using the Polyline class.

Start with the following basic Google Map. Make sure to replace YOUR_API_KEY in the script tag with your API key that you got from https://developers.google.com/maps.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
	function initMap() {
		var mapOptions = {
			zoom: 5,
			center: new google.maps.LatLng(40.7534, -85.1606),
			mapTypeId: 'roadmap'
		};
		var map = new google.maps.Map(document.getElementById('map'), mapOptions);
	}
	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

In this how-to, I'll add a polyilne to a map to show part of the path the first road trip in Jack Kerouac's On the Road (1957).

Inside the initMap() function, create an array to hold each point in the line's coordinates.


var roadTripCoordinates = [
	{lat:40.759011,lng:-73.984472},
	{lat:40.916765,lng:-74.171811},
	{lat:41.320043,lng:-73.979287},
	{lat:41.503427,lng:-74.010418},
	{lat:40.4406,lng:-79.9959},
	{lat:41.878114,lng:-87.629798},
	{lat:41.515776,lng:-88.089981},
	{lat:41.603121,lng:-93.615418},
	{lat:41.614432,lng:-94.017453},
	{lat:41.506006,lng:-94.318428},
	{lat:41.264905,lng:-95.995216},
	{lat:40.922593,lng:-98.342114},
	{lat:41.134193,lng:-104.816437},
	{lat:39.755373,lng:-104.984837}
];

Create a Polyline object and specify the array you created in the last step as the value of the path property.


var roadTrip = new google.maps.Polyline({
	path: roadTripCoordinates
	});

Optionally, add options to specify the color, weight, and opacity of the line.


var roadTrip = new google.maps.Polyline({
	path: roadTripCoordinates,
	strokeColor: '#FF0000',
	strokeOpacity: 1.0,
	strokeWeight: 2
	});

Attach the polyline to the map by using setMap.


roadTrip.setMap(map);

Open your web page in a browser to see the results.

Your final code should look like the following:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
		function initMap() {
			var mapOptions = {
				zoom: 5,
				center: new google.maps.LatLng(40.7534, -85.1606),
				mapTypeId: 'roadmap'
			};
			var map = new google.maps.Map(document.getElementById('map'), mapOptions);

			var roadTripCoordinates = [
				{lat:40.759011,lng:-73.984472},
				{lat:40.916765,lng:-74.171811},
				{lat:41.320043,lng:-73.979287},
				{lat:41.503427,lng:-74.010418},
				{lat:40.4406,lng:-79.9959},
				{lat:41.878114,lng:-87.629798},
				{lat:41.515776,lng:-88.089981},
				{lat:41.603121,lng:-93.615418},
				{lat:41.614432,lng:-94.017453},
				{lat:41.506006,lng:-94.318428},
				{lat:41.264905,lng:-95.995216},
				{lat:40.922593,lng:-98.342114},
				{lat:41.134193,lng:-104.816437},
				{lat:39.755373,lng:-104.984837}
			];
			var roadTrip = new google.maps.Polyline({
				path: roadTripCoordinates,
				strokeColor: '#FF0000',
				strokeOpacity: 1.0,
				strokeWeight: 2
			});
			roadTrip.setMap(map);
		}
	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTM5RKrtCLpZAj5HU3K3cTvFNB240NsBg&callback=initMap">
</script>
</body>
</html>