1. Home
  2. How-to Articles
  3. How to Encode a Polyline in a Google Map

How to Encode a Polyline in a Google Map

  • google plus

In Brief...

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.

Instructions

  1. 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.
    2. 
<!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).

  2. Inside the initMap() function, create an array to hold each point in the line's coordinates.
    3. 
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}
];
  3. Create a Polyline object and specify the array you created in the last step as the value of the path property.
    4. 
var roadTrip = new google.maps.Polyline({
	path: roadTripCoordinates
	});
  4. Optionally, add options to specify the color, weight, and opacity of the line.
    5. 
var roadTrip = new google.maps.Polyline({
	path: roadTripCoordinates,
	strokeColor: '#FF0000',
	strokeOpacity: 1.0,
	strokeWeight: 2
	});
  5. Attach the polyline to the map by using setMap.
    6. 
roadTrip.setMap(map);
  6. Open your web page in a browser to see the results.
    Map with a polyline

    Your final code should look like the following:

    7. 
<!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>

Need Ajax Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss