前回 NP_GoogleMapsの設定 で指定したGoogleMapsのポインターをGoogleMap上にまとめて表示するプラグインです。

NP_MapBlogの概要

item内で指定したNP_GoogleMapsのポインタを、GoogleMap上にまとめて表示するプラグイン。

表示するポインタは、アイテムまたはポイント数で指定する方法が選択できます。

ポイント数が多い場合は、ページ送りが表示されます。また、ブログによる絞込み、カテゴリによる絞込みが可能です。（NP_MultipleCategoriesの複数カテゴリ，サブカテゴリや、NP_TagEXによるタグにも対応）

NP_GoogleMapsをインストールする必要があります。

NP_MapBlogの設置

1. ZIPファイルをダウンロードして、出来たフォルダをnucleus/pluginsにアップロードします。
2. 管理パネル > プラグインの管理 から、Mapblogをインストールします。

skin/header.inc

......
<%GoogleMaps(HEAD)%>
<%parsedinclude(navigation.inc)%>

※default skin以外は、</head>内に記述。

skin/footer.inc　</html>の直前

......
<%GoogleMaps(SCRIPT)%>
</html>

※前回のやり方で、既に記述済みのはず

default/mapテンプレートを新しく作り、アイテムの本体に下記のコードを書く。 ( テンプレートの記述解説 )

default/map アイテムの本体内

<%MapBlog(START)%>
<a href="<%itemlink%>"><%title%></a>
<%MultipleCategories%>
<%MapBlog(INFO)%>
<%MapBlog(THUMBNAIL,100)%>
<%MapBlog(END)%>

Mapblogのスキンへの記述方法

表示したい部分に下記の記述 ( スキンへの記述解説 )

表示したい位置

<%MapBlog(mmap,10/i,,m(400|300|map|b/s/s|auto))%>

znItemFieldEXと連携した地図の表示

前回、znItemFieldEXと連携した方法をご紹介しましたが、Mapblogでも設定します。

管理画面TOPからBlogの設定に進む

下の方にあるMapblogのオプション画面で、Points from templateに下記を記述

オプション > Points from template

jp[<:znItemFieldEX(add:>)]|yes|<:title:>

関連サイト

plugins:mapblog [Nucleus CMS Japan Wiki]

plugins:znitemfieldex [Nucleus CMS Japan Wiki]

NucleusでGoogleMapを利用した地図を表示するプラグイン、NP_GoogleMapsとNP_MapBlogの設置方法をご紹介します。

Nucleus Japanでも使用方法についての説明があります(plugins:googlemaps [Nucleus CMS Japan Wiki])が、情報を出しているサイトが少なかったため、正常に動作するまで少し時間がかかったので、Nucleus初心者向けに図入りで解説します

※default skinを例とし、個別ページにGooglemapを表示させます。

NP_GoogleMapsの設置

1. まず最初にGoogleのアカウントとGoogle Maps API keyが必要です。Google Maps APIのページから取得してください。
2. ZIPファイルをダウンロードして、NP_GoogleMaps.phpとgooglemapsフォルダをnucleus/pluginsにアップロードします。pearフォルダをnucleus/libsの下にアップロードします。
3. 管理パネル > プラグインの管理 から、GoogleMapsをインストールします。プラグインの管理内のGoogleMaps – 編集でGoogle MapsのAPIキーと、Flickrの写真を使う場合はAPIキーを入れます。Google MapsのAPIキーはブログごとにも設定可能です。

skin/header.inc

<%GoogleMaps(HEAD)%>
<%parsedinclude(navigation.inc)%>

※default skin以外は、</head>内に記述。

skin/footer.inc </html>の直前に記述

<%GoogleMaps(SCRIPT)%>

記事の投稿時に地図を表示させる

記事の投稿で、地図を表示させたい部分に下記の記述。

<%gmap(inline,p(jp[東京都港区芝公園4-2-8]|yes|東京タワー),m(400|300|map|xs/none/none|3))%>

(インライン表示｜住所｜マーカー有),(地図幅｜地図高さ｜地図タイプ｜MAPコントロール｜ズームレベル)

※記述の参考 : アイテムへの記述 – googlemaps [Nucleus CMS Japan Wiki]

znItemFieldEXと連携した地図の表示

※znItemFieldEXでaddフィールドに住所が入っている場合

管理パネル > テンプレートの編集 > default/item – 編集 > アイテムの本体の表示させたい部分

<%GoogleMaps(inline,p(jp[<:znItemFieldEX(add):>]|yes|< :title:>),m(400|400|map|b/s/s|2))%>

記事の投稿時に、拡張フィールド内に住所情報を入れる

これで個別エントリーに地図が表示させるようになります。

長くなりましたので、NP_MapBlogの設定は次のエントリで