プラグインのダウンロード

GitHubで公開されています。下記からクローンするかダウンロードしてください。

benignware/jquery-findus

JavaScriptの読み込み

「jQuery」「GoogleMap API」とダウンロードした「jquery.findus.js」を読み込みます。

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="js/jquery.findus.js"></script>
<script>
  $(function() {
    $('.findus').findus();
  });
</script>

Data属性に経度緯度を指定して表示

「data-latitude」「data-longitude」に経度緯度を設定します。

<div class="findus" data-latitude="35.690551" data-longitude="139.69256999999993"></div>

直接住所を入れて表示

「data-address」に直接住所を指定して表示できます。

<div class="findus" data-address="東京都新宿区西新宿2-8-1"></div>

他にaddressタグを中に指定する方法もあります。

<div class="findus">
    <h5>東京都庁</h5>
    <address>東京都新宿区西新宿2-8-1</address>
</div>

この方がわかりやすいですね。

その他オプション

オプションを設定することで表示方法をカスタマイズすることができます。
詳しくはプラグインのサイトを確認してください。

$('.findus').findus({
  autoShow: false, //ウィンドウ非表示
  map: {
      draggable: true,  // ドラッグ可能
      scrollwheel: true // スクロール拡大
  }
});

デモはこちらです。

jquery-findus

テンプレートなんかを使っているとheadやbody終了直前などにJS書くのが億劫になるのですが、タグで指定できれば使いやすいですね。