Google Maps: display an encoded polyline

Question

google.maps.geometry.encoding.decodePath(encodedPath:string)

http://code.google.com/apis/maps/documentation/javascript/reference.html#encoding

From that page:

var decodedPath = google.maps.geometry.encoding.decodePath(encodedPolyline);
var decodedLevels = decodeLevels(encodedLevels);

// Decode an encoded levels string into an array of levels.
function decodeLevels(encodedLevelsString) {
  var decodedLevels = [];

  for (var i = 0; i < encodedLevelsString.length; ++i) {
    var level = encodedLevelsString.charCodeAt(i) - 63;
    decodedLevels.push(level);
  }

  return decodedLevels;
}

Make sure the geometry libaray is being loaded per: http://code.google.com/apis/maps/documentation/javascript/basics.html#Libraries

Working example of the encoded polyline at: http://jsfiddle.net/ryanrolds/ukRsp/

If you're getting this error:

Uncaught TypeError: Cannot read property 'encoding' of undefined

Then the Geometry library is not being loaded. Add the geometry library (&libraries=geometry) to the google maps api load like in:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>

I don't know why, but if you store your encoded polylines and/or levels in variables (like elements of an array of polylines), String() function is required:

polyLayer = [
[['ynh`IcftoCyq@Ne@ncBds@EEycB'],
 ['PHIHP']],
...
];

...
for (var i = 0; i < polyLayer.length; i++) {
    poly = new google.maps.Polyline({
        ...,
        path: google.maps.geometry.encoding.decodePath(String(polyLayer[i][0])), 
        levels: decodeLevels(String(polyLayer[i][1])), 
        ...
    }); 
    poly.setMap(map);
}