組み込みJS Yahoo! Map Cluster を使ってピンが集まった場所をまとめよう

Yahoo! Map Cluster の実装イメージ

Yahoo! Map Cluster のJSライブラリの紹介はすでに過去開催のTraining Camp(Yahoo! 地図とYahoo! Map Clusterをためしてみよう | 2019春合宿 | ハンズオン)で行なっておりますが、Ver.2.11より組み込みJSとして仲間入りしました。

以前は JS を書かなければいけませんでしたが、組み込みJSとして Yahoo! Map Cluster を使えば、HTMLに追記するだけで実装することができます。

ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。

Yahoo!地図を利用するメリット

Webサイトへの地図の埋め込みに Google Maps を利用する機会も多いと思います。昨年、Google Maps がクレジットカード情報の登録が必須になり、無料での利用が 28,000pv/月までと仕様が変更になりました。

それに対してYahoo!地図は現在のところ、クレジットカードの登録は必要がなくAPIの利用上限もGoogle Mapsと比べると50倍以上となっています。日本国内の地図であれば、Yahoo!地図 を利用することも検討に加えていいサービスではないでしょうか。

今回のハンズオンはa-blog cmsでGoogle Mapsの代替としてYahoo!地図を使いこなすためのものとなっています。

組み込みJSの解説

組み込みJSは、a-blog cms 本体に同梱されているJavaScriptのライブラリです。a-blog cms をインストールしてある環境であれば特別なファイルを読み込まなくても、HTMLにclass属性を追加するだけでお手軽に利用できます。

組み込み方法

<div class="js-yahoo-map"
   data-cluster="true"
   data-lat="35.172775"
   data-lng="136.887466"
   data-zoom="15"
   data-markers='35.172762,136.887447|35.176559,136.885409|35.170394,136.887383'
   data-messages='<table>... 省略 ....</table>'
   style="width: 820px; height: 400px;"
></div>

※横幅と高さを指定することにより、地図のサイズを指定できます

データ属性解説


データ属性名 詳細 記述方法
data-lat ピンを表示する地図の緯度 数字
data-lng ピンを表示する地図の経度 数字
data-zoom ピンを表示する地図のズームの値 数字
data-markers 地図内に表示したいピン。経度と緯度を「,」つなぎで記述する 数字
data-messages 吹き出し内に表示するコンテンツ HTML
data-cluster クラスターを使用するかどうか true|false

Yahoo!地図の設定方法

a-blog cmsでYahoo!地図を利用するには、以下の手順が必要になります。

  1. Yahoo! デベロッパーネットワークにてAPIの利用申請
  2. a-blog cmsの管理画面よりアプリケーションIDを登録

Yahoo! デベロッパーネットワークにてAPIの利用申請

まず、Yahoo! JAPAN IDでログイン(Yahoo! JAPAN IDをお持ちでない方は新しく取得)し、アプリケーションの登録を行います。

アプリケーションの種類が2種類ありますが、「クライアントサイド」をお選びください。


以下を参考にしてアプリケーションの基本情報の必須事項を記入し、ガイドラインを確認し、ご登録ください。


アプリケーション名 JS Yahoo! Map Cluster

a-blog cmsの管理画面よりアプリケーションIDを登録

登録が完了すると、Client ID が発行されます。この Client ID をa-blog cmsの管理画面にて登録をします。


管理画面に入り、 コンフィグ > プロパティ設定にて、APIキーを登録します。


これにより、Yahoo!地図が現在のブログで有効になりました。

Yahoo!地図を実装する

すでに経度や緯度の情報を持っている、物件情報のページで実装してみましょう。

/themes/beginner2019/realestate/index.html を開き、28行目に以下の記述を行なってください。

<div class="main-inner is-space-right">

<!-- ▼▼▼以下を記述▼▼▼ -->
<div class="module-header acms-margin-bottom-small clearfix">
  <h2 class="module-heading">%{CATEGORY_NAME}の検索</h2>
</div>
<div class="map-wrapper acms-margin-bottom-large">
  <div class="realestate-map">
  <!-- BEGIN_MODULE Entry_Summary id="summary_custom" -->
  <!-- BEGIN_SetRendered id="map-markers" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{map_lat},{map_lng}<!-- BEGIN glue -->|<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->

  <!-- BEGIN_SetRendered id="map-messages" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop --><table><tr><td><a href="{url}"><!-- BEGIN_IF [{main_photo@path}/nem/] --><img src="%{MEDIA_ARCHIVES_DIR}{main_photo@path}" width="200" alt="" /><br/><!-- END_IF -->{title}</a></td></tr></table><!-- BEGIN glue -->[[:split:]]<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->
  <!-- END_MODULE Entry_Summary -->

  <div class="js-yahoo-map"
    data-cluster="true"
    data-lat="35.172775"
    data-lng="136.887466"
    data-zoom="15"
    data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
    data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
    style="width: 820px; height: 400px;"
  ></div>
  </div>
</div>
<!-- ▲▲▲ここまで▲▲▲ -->

<!-- エントリーサマリー(カスタムフィールド画像表示) -->
@include("/include/entry/summary-custom.html")

SetRenderedとGET_Rendered

ピンの位置指定と吹き出し部分にGET_Renderedを使うことにより、Entry_Summary モジュールの実行が通常は2回かかるところを1回にしています。動作するモジュールを節約することにより、ページの表示速度を早くすることが可能です。

SetRenderedとGET_Renderedについては、以下のページをご覧ください。

エントリーデータを増やす

今のままではピンの数が少ないので、エントリーを増やしましょう。 下記で配布しているCSVファイルをダウンロードして、管理画面のサイドカラムにある「インポート」ページから、エントリーをインポートしてください。 カテゴリーは「物件情報」を選択します。


物件情報のエントリーデータ(CSV)


管理画面からモジュールID「summary_custom」の表示を30件にするとピンがたくさん表示されます。


同じタグ付けがされている記事