Webサイトを作成していると世界地図を表示させる機会もあるかもしれません。

世界地図の画像を貼り付けたり、グーグルマップなどで世界地図を表示させたりという手もありますが、もう少しお洒落に世界地図を表示させたい…というときに簡単便利なのがこのjQueryプラグイン「JQVMap(jQuery Vector Maps)」。

拡大縮小させても画像が粗くならないScalable Vector Graphics (SVG)が利用されていて、拡大・縮小可能な綺麗な世界地図が描かれます。

サンプルはこちら

お洒落な世界地図を表示するjQueryプラグイン「JQVMap」サンプル


地図の左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。

設定方法は続きをご覧ください。




【設定方法】

まずはこちらのjQuery Vector Mapサイトからファイルを一式ダウンロードします。

<head>部分に以下を記述します。ファイルのパスに注意。


そして<body>部分の世界地図を表示させたいところで、

と記述すればお洒落に世界地図が表示されます。

以下はサンプルのソースです。どうぞご参考まで。

この記事と関連してると思われる記事: