CanvasとGoogle Maps APIを組み合わせ、桜前線を構築しました。
Google Map単体で豊富な機能を備えていますが、そこにCanvasの表現力を加えることで実現の幅がさらに広まったのではないでしょうか？

アジェンダ

• この作品の特長
• 桜前線 on Google Mapデモ
• 開花状況（桜の木アイコン）の表示仕様
• 制作のポイント

この作品の特長

• Mapをスクロールorズームイン・アウトするとビューポートにCanvas（花びらのエフェクト）が追従します。
• PanoramioAPIを使って各地に桜写真を埋め込んでいます。
• アクセス日で開花状況（桜の木アイコン）変化します。

桜前線 on Google Mapデモ

桜前線 on Google Map - jsdo.it - share JavaScript, HTML5 and CSS

開花状況（桜の木アイコン）の表示仕様

予め設定した満開日とアクセス日を比較してアイコンを切り替えています。
開花状況は厳密なものではなく参考情報となりますので、これから花見に出掛けられる方は鵜呑みにされないよう十分にご注意ください。

• 満開日±4日以内：満開
• ±7日以内：7分咲き
• ±10日以内：4分咲き
• -11日以上：つぼみ
• それ以外：枝

制作のポイント

Google Mapの子要素としてCanvas挿入

Google Map（ルートDiv）とCanvas（花びらエフェクト）を兄弟関係で重ねるとMapが操作不能になります。
そのためGoogle Mapの初期化後、CanvasをGoogle Mapの子要素として挿入する必要があります。

// CanvasをGoogle Mapの子要素として挿入 
var map, overlay, queue;
 
// Google Map生成（引数は適宜設定してください） 
map = new google.maps.Map( mapDiv, mapOptions );
 
// Canvasを子要素として挿入 
overlay = new overlayer( map );
 
// Mapスクロールorズームイン・アウトでCanvas位置調整 
google.maps.event.addListener( map, 'bounds_changed', function() {
window.clearTimeout( queue );
queue = window.setTimeout(function() {
overlay.draw();
}, 500 );
});
 
// コンストラクタ 
function overlayer( map ) {
this.map = map;
this.div = null;
this.canvas = null;
this.setMap( map );
}
overlayer.prototype = new google.maps.OverlayView();
// Canvas生成・挿入。必要に応じてプロパティ設定してください 
overlayer.prototype.onAdd = function() {
// div生成 
this.div = document.createElement( 'div' );
this.div.style.position = 'absolute';
 
// canvas生成 
this.canvas = document.createElement( 'canvas' );
 
// DOMへ追加 
this.div.appendChild( this.canvas );
this.getPanes().overlayImage.appendChild( this.div );
};
// CanvasをMapコンテナ全体（100%）で描画する例 
overlayer.prototype.draw = function() {
var projection = this.getProjection(),
sw = projection.fromLatLngToDivPixel( this.map.getBounds().getSouthWest() ),
ne = projection.fromLatLngToDivPixel( this.map.getBounds().getNorthEast() );
 
this.div.style.left = sw.x + 'px';
this.div.style.top = ne.y + 'px';
this.div.style.width = ( ne.x - sw.x ) + 'px';
this.div.style.height = ( sw.y - ne.y ) + 'px';
};
// Canvas削除用メソッド（未使用でも定義する必要あり） 
overlayer.prototype.onRemove = function() {
this.div.parentNode.removeChild( this.div );
};

PanoramioAPIでMapへ写真埋め込み

桜のタグが設定された写真のみ取得し、Mapへ埋め込んでいます。
2012年4月11日現在、日本語版公式ドキュメントにPanoramioAPIの情報がありませんが、英語版公式ドキュメントには記載されています。

// 桜のタグが設定された写真のみ取得・埋め込み 
var photoLayer = [],
tags = [
'桜',
'さくら',
'サクラ',
'sakura'
];
 
for ( var i = -1, l = tags.length;  ++i < l; ) {
(function() {
var num = i;
 
window.setTimeout(function() {
photoLayer[num] = new google.maps.panoramio.PanoramioLayer();
photoLayer[num].setMap( map );
photoLayer[num].setTag( tags[num] );
}, ( num + 1 ) * 500 );
})();
}