MODXでGoogleマップの地図を表示する方法

最終更新日：2015年9月12日 shortlink：http://modx.jp/?id=1048

石垣市役所

MODXでGoogleマップを表示するための方法はいろいろあります。できるだけPHPやJavascriptなどのプログラミングを行なわずに済ませる方法を紹介します。

Googleマップで取得した埋め込みコードを投稿画面内で貼り付けると、ページ上で地図を表示できます。

これです。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3635.1672986622502!2d124.15557190000001!3d24.340664300000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34600aad05c2dcfb%3A0xaa0247173dd31b79!2z55-z5Z6j5biC5b255omA!5e0!3m2!1sja!2sjp!4v1441972536285" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

たとえば石垣市役所なら上記のようなコードを取得できます。

貼り付けると、上記のように地図が表示されます。

しかしこの方法は、投稿画面でTinyMCE(リッチテキストエディタ)が有効になっている場合は使えません。無効にできる場合は無効にするとよいですが、無効にできない場合は下記のようなコードをTinyMCEのHTML編集モード内で記述します。

<!--@MODX:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3635.1672986622502!2d124.15557190000001!3d24.340664300000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34600aad05c2dcfb%3A0xaa0247173dd31b79!2z55-z5Z6j5biC5b255omA!5e0!3m2!1sja!2sjp!4v1441972536285" width="600" height="450" frameborder="0" style="border:0;margin-bottom:1em;" allowfullscreen></iframe>
-->

というHTMLコメントで囲みます。このHTMLコメントはページの表示処理を行なう際に削除されるため、本来ならコメント扱いされる部分がそのまま出力される仕組みになっています。投稿画面上ではただのHTMLコメントなので、TinyMCEでは無視させることができます。

でもこの方法も、リッチテキストエディタが有効になっている投稿画面上では見えないため不便です。HTMLコメントなのでWYSIWYG画面で見えないのは当然ですが。

[*地図:googlemaps*]

「地図」という名前のテンプレート変数を作って、上記のようにgooglemapsモディファイアを使うと、簡易ですがGoogleマップを表示できます。テンプレート変数には座標値を入力します。

座標の取得は簡単。Googleマップ上の任意の地点で右クリックすると、

座標値が表示されます。これをコピーするだけです。

googlemapsモディファイアを使うと、このように表示されます。今回のブログ記事でまずひとつお伝えしたかったのがこれで、モディファイアという便利な仕組みがあることを知っていただけると、コンテンツ編集に関していろいろ幅が増えてくると思います。

特定のページに地図を表示するためだけにテンプレート変数を増やしたくない場合は、下記のような方法を用いるとよいでしょう。

[+@24.340683, 124.155811:googlemaps+]

上記のように記述すれば、投稿画面以外の場所にパーツを追加する必要はありません。パーツを経由せず、モディファイアに渡す値を直接記述しています。このような使い方はモディファイアの本来の用途としては向いてませんが、モディファイアの扱いに慣れてくると、このような使い方が分かりやすく感じられます。

https://github.com/.../ex_modifiers.php#L775-L781

googlemapsモディファイアは上記のような処理を行なっています。

<iframe src="https://maps.google.co.jp/maps?ll=座標値&output=embed&z=15"></iframe>

上記のようなHTMLコードを出力しているだけです。「座標値」がテンプレート変数の値ということになります。

googlemapsモディファイアは出力内容を自由にカスタマイズすることができません。たとえばマーカーを表示できないため実用性に欠けます。モディファイアは簡単に自作できますので、必要に応じて自作するとよいでしょう。

[チャンク名] googlemaps
<iframe src="https://maps.google.co.jp/maps?ll=[+value+]&output=embed&z=15"></iframe>

上記のようなチャンクを作成して、

[+@24.340683, 124.155811:googlemaps+]

このように記述します。すると、同じように動作します。必要に応じてチャンクの内容を書き換えてください。GoogleマップのAPIを活用すれば高度な地図表示ができます。

GoogleマップのAPIの使い方を理解するのは、慣れない人には難しいかもしれません。

http://objc-lovers.com/archives/210
探してみると、たとえば上記のようなjQueryプラグイン(AxGmap)を使うと手軽にGoogleマップを表示できそうです。これをそのまま使ってもいいですが、せっかくMODXを使っているので、モディファイアを作ってすっきりとまとめることができます。

[チャンク名] phx:AxGmap
<div class="axgmap" data-latlng="" data-zoom="16"
  data-map-width="100%" data-map-height="320">
  <p data-title="[*pagetitle*]" data-window-open="1">[*pagetitle*]</p>
</div>

上記のようなモディファイアをチャンクで作成し、

[+@24.340683, 124.155811:AxGmap+]

このように記述すると、マーカー付きの地図を表示できます。

石垣市役所

このように表示できます。レスポンシブ対応です。

MODXでGoogleマップの地図を表示する方法

PR