jQuery 簡単にGoogle Mapsを設置できるプラグイン

ホームページにGoogle Mapsを表示させるのはそんなに難しくないですが、マーカーを表示させたり、マーカーのアイコンを変更したりなどのちょっとしたカスタマイズは少し面倒ですよね。その面倒を軽減してくれるjQueryのプラグインを見つけたので紹介します。Google Mapsを表示させるプラグインはgmap.jsも人気ですが、こちらも使いやすそうです。

「jquery.googlemap.js」で簡単にGoogle Mapsを表示させる方法

使い方は非常に簡単です。まず、こちらからファイルがダウンロードしましょう。

head内にjqueryとプラグインファイル、GoogleMap APIを読み込むコードを記入します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.fr/jsapi"></script>
<script type="text/javascript">
     google.load("maps", "3.4", {
          other_params: "sensor=false&language=ja"
     });
</script>
<script type="text/javascript" src="jquery.googlemap.js"></script>

次にbody内のGoogleMapを表示させたいところにブロック要素を作ります。(*cssで width と height を指定する必要があります。)

<div id="map" style="width: 300px; height: 300px;"></div>

あとは そのブロック要素を指定してJavascript を少し記入するだけです。

$(function() {
     $("#map").googleMap();
})

googlemap demo

ただし、なぜかデフォルトでフランスのパリが中心に表示されますので、オプションで場所を指定してあげます。記入方法は次の通りです。

$(function() {
    $("#map").googleMap({
      zoom: 13, // ここの数字で倍率を調整できます!
      coords: [35.690346,139.700603], // ここの数値で中心地を指定できます。
    });
  })

googlemap02

東京都新宿駅を中心にしてみました。この座標を求める数値は、こちらのページで簡単に調べられます。

住所にマークをつけたい場合は、addMarker()を使います。例えば新宿駅にマークをつけたい場合。

$(function() {
     $("#map").googleMap();
     $("#map").addMarker({
          coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。
     });
})

googlemap03

これで簡単にマーカーつきのgooglemapを表示させる事が出来ました。

次にマーカーをオリジナルの画像に変えてみます。先ほどのコードに一行追加するだけです。

$(function() {
    $("#map").googleMap();
    $("#map").addMarker({
      coords: [35.690346,139.700603], // ここにマークを置きたい場所の経度、緯度を指定します。
      icon: 'koko.png', // 画像へのパスを記入します!,
    });
  })

googlemap04

こんな風に文字を入れる事も出来ます。簡単ですね。

ひとつ残念な点で、マーカーを指定した場合、倍率の指定が出来ないようです。

jQueryで要素をランダムにフェードインで表示させる方法

画像表示をフェードインさせることで、そのWebサイトの印象はがらりと大きく変わります。ここでは、実装が簡単で使う機会が多そうな、「champagne.js」を紹介します。リストの要素等をランダムな順番でフェードイン表示をさせる事が出来ます。インパクトのあるサイト作りに活躍しそうです。

Continue reading