Duncan's blog

February 12, 2013

Google Maps API – polylines

Filed under: Google Maps,Javascript — duncan @ 6:41 pm
Tags: , , , ,

So now we’ve created a map, added markers and infowindows. Maybe you want to start drawing lines and shapes on it.

Supposing I have two markers, and I just want to draw a line connecting them.

<script type="text/javascript">
	function initialize() {
		var homeLatlng = new google.maps.LatLng(51.476706,0);

		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 15,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

		// add start marker
		var startLatLng = new google.maps.LatLng(51.482051,0.001436);

		var startMarker = new google.maps.Marker({
			position: startLatLng, 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});

		// add end marker
		var endLatLng = new google.maps.LatLng(51.473271,0.003195);

		var endMarker = new google.maps.Marker({
			position: endLatLng, 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png'
		});

		// draw the route
		var route = new google.maps.Polyline({
			path: [startLatLng, endLatLng],
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 4,
			map: map
		});	
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>

Which gives us this simple map here:
polyline1

The important part to note here is the path attribute in the Polyline Options. The [ ] indicates it is an array, and indeed you can make an array of many coordinates:

	function initialize() {
		var homeLatlng = new google.maps.LatLng(51.476706,0);

		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 15,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});

		// add start marker
		var startMarker = new google.maps.Marker({
			position: new google.maps.LatLng(51.482238,0.001581), 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
		});

		// add end marker
		var endMarker = new google.maps.Marker({
			position: new google.maps.LatLng(51.481577,-0.0022), 
			map: map, 
			icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/red-dot.png'
		});

		// create an array of coordinates
		var arrCoords = [
			new google.maps.LatLng(51.482238,0.001581),
			new google.maps.LatLng(51.473364,0.011966),
			new google.maps.LatLng(51.471974,-0.000651),
			new google.maps.LatLng(51.472108,-0.002196),
			new google.maps.LatLng(51.474995,-0.003827),
			new google.maps.LatLng(51.476492,-0.005629),
			new google.maps.LatLng(51.477855,-0.006058),
			new google.maps.LatLng(51.478443,-0.007045),
			new google.maps.LatLng(51.479298,-0.007861),
			new google.maps.LatLng(51.481202,-0.002136),
			new google.maps.LatLng(51.481577,-0.0022)
		];

		// draw the route
		var route = new google.maps.Polyline({
			path: arrCoords,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 4,
			map: map
		});	
	}

	google.maps.event.addDomListener(window, 'load', initialize);

Which gives you something more useful (if you were wanting to map the boundary of Greenwich Park that is):

polyline2

One important detail with polylines is if we want the lines to be geodesic or not.  When drawing lines, by default they are in a straight line on a 2D surface.  But the earth’s surface is curved.  What this means is if you want the shortest line between two points, the line might be slightly curved.  This is probably easier to illustrate than to explain.

Example One

polylines1

Here I’m drawing one blue vertical line, and several red diagonal lines, using this code:

	function initialize() {
		var line;
		var homeLatlng = new google.maps.LatLng(0,0);
				
		var map = new google.maps.Map(document.getElementById("map"), {
			zoom: 2,
			center: homeLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		});
		
		for (var i = 0; i < 60; i+= 5) {
			line = new google.maps.Polyline({
				path: [homeLatlng, new google.maps.LatLng(i,170)],
				strokeColor: "#FF0000",
				strokeOpacity: 1.0,
				strokeWeight: 1,
				geodesic: false,
				map: map
			});
		}
		
		// for vertical line just draw one line
		line = new google.maps.Polyline({
			path: [homeLatlng, new google.maps.LatLng(85,0)],
			strokeColor: "#0000FF",
			strokeOpacity: 1.0,
			strokeWeight: 1,
			geodesic: false,
			map: map
		});
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);

Notice I’m specifying geodesic: false – we don’t want geodesic curved lines.

Also one other difference over earlier examples.  We need to use the Geometry library from Google, so have to add this as a parameter when calling their script:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Example Two

This time simply change the geodesic attribute to true in both places we create polylines; all the other code is identical.

polylines2

The vertical line and the one horizontal line don’t look any different, but the diagonal lines take a curved route which is approximately the shortest distance, following the earth’s curve, between the two points. Of course on shorter distances you’re unlikely to notice any difference between the straight and curved lines, so for the most part you’ll typically use straight lines.

1 Comment »

  1. […] after a basic introduction to polylines, let’s try doing a bit more with them. Here’s a simple example based on something I was […]

    Pingback by Google Maps API – polylines and distances « Duncan’s blog — February 14, 2013 @ 6:58 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: