# 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 map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: homeLatlng,
});

position: startLatLng,
map: map,
});

position: endLatLng,
map: map,
});

// draw the route
path: [startLatLng, endLatLng],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 4,
map: map
});
}

</script>```

Which gives us this simple map here:

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 map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: homeLatlng,
});

map: map,
});

map: map,
});

// create an array of coordinates
var arrCoords = [
];

// draw the route
path: arrCoords,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 4,
map: map
});
}

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

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

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

```	function initialize() {
var line;

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

for (var i = 0; i < 60; i+= 5) {
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1,
geodesic: false,
map: map
});
}

// for vertical line just draw one line
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 1,
geodesic: false,
map: map
});
}

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.

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.