jGmaps | jQuery Plugins

Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」
必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。

$('#mapa').jgmaps( 
    { width: 300, height: 300, 
        directions:{ 
            address: ['東京都新宿区', '東京都港区'], 
            usePanel: true, 
            panelId: 'panelDirections' 
        }
    } 
);

次のように、経路が地図に表示されます。



文字による案内情報も表示できます。



会社案内や会場案内なんかもこれで速攻実装できそうですね。
ダウンロードできるサンプルをいじくってみましょう。
地名に日本の場所を漢字で使う場合、文字コードはUTF-8にするのをお忘れなく。

関連エントリ

• Googleマップ風のUIを実現できるJSライブラリ「Polymaps」
• 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」
• iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」
• 「Google Static Maps API」を使い携帯でGoogleマップを表示