Geodesic Polyline

by secretgspot

HTML

<html>
<head>
<title>Google Maps API v3 : Geodesic Hardcoded Polyline</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:530px; height:230px">
</div>
</body>
</html>

JavaScript

function initialize()
{
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    {
        zoom: 1,
        center: new google.maps.LatLng(15,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    });

    var route =
    [
        new google.maps.LatLng(-25.641526,-67.324219),
        new google.maps.LatLng(-13.410994,-53.4375),
        new google.maps.LatLng(24.688,46.7224),
        new google.maps.LatLng(39.97712,-76.201172),
        new google.maps.LatLng(-34.307144,151.875),
        new google.maps.LatLng(51.5133,-0.0889)
    ];    //Always remember that two consecutive lat-lngs above will form one geodesic polyline.

    var path = new google.maps.Polyline(
    {
        path: route,
        strokeColor: "972BC1",
        strokeOpacity: 0.75,
        strokeWeight: 2,
        geodesic: true    //The polylines need to be declared as geodesic. Google Maps API takes care of the maths behind this.
    });
    path.setMap(map);
}