Craft CMS の Maps プラグインで位置情報をデータとしてもつ
これは Craft CMS Advent Calendar 2022 23日目の記事です。
Craft CMS でエントリのデータとして地図情報を持たせたい場合があるとする。
Google Map の Embed Code を貼るので解決するのであればいいのかもしれないが、、、
緯度経度とか住所情報とかを持たせておくために、管理画面で検索して値を保持する時には Maps プラグインを使うと後々便利になるかもしれない。
Maps
https://plugins.craftcms.com/s...
無料の Lite Edition。有償の Pro Edition がある。
Editions - Maps
https://plugins.craftcms.com/s...
違いはいくつかあるが、今回はひとまず管理画面でデータを持つ想定ということで、 Lite Edition で試してみる。
プラグインのインストールとフィールド設定
プラグインをインストールして、 Map フィールドを作成する。
プラグインの設定で、 OpenStreetMap とか選べる。
Google Map の場合はAPIキーが必要なのだが、ここで入力してもうまいこと保存されないのか、挙動がよくわからず。
Google Map を使う場合は後述。
エントリで名前から検索
マリーナベイサンズを検索してみる
<h1 class="text-4xl text-black font-display my-4">エントリタイトル：{{entry.title}}</h1>
<div>
<p>address : {{ entry.map.address }}</p>
<p>lat : {{ entry.map.lat }}</p>
<p>lng : {{ entry.map.lng }}</p>
<p>streetAddress : {{ entry.map.streetAddress }}</p>
<p>zoom : {{ entry.map.zoom }}</p>
<p>parts.country : {{ entry.map.parts.country }}</p>
<p>parts.state : {{ entry.map.parts.state }}</p>
<p>parts.county : {{ entry.map.parts.county }}</p>
<p>parts.city : {{ entry.map.parts.city }}</p>
<p>parts.postcode : {{ entry.map.parts.postcode }}</p>
</div>
必要そうな物はとれてそうな気がする。
地図上のアイコンをD&Dすると位置を変更したりできる。
日本の場合どうだろう？ということで、東京タワーを検索してみる。
日本も特に問題なさそう。
日本語になるのはどこかで判定してるのかどうなのか。
同様に内容を出力してみる。
都道府県的な情報がはいっていなさそう。
確かに一つ前の画像で、都道府県的な値がない。
State の所に手動で値を入れれば使えるとは思うが、若干手間ではある。。
Google Map を利用する例
Google Map を使ってみる。
ドキュメントにあるように、Google Map のAPIキーが必要になる。
Google Maps Platform - Location and Mapping Solutions
https://mapsplatform.google.co...
なので、「Maps JavaScript API」「Places API」を有効にして、APIキーを取得しておく。
プラグイン設定でAPIキーを入れるっぽい所に入れても保存されてなさそうなので、設定ファイルを用意する。
config/simplemap.php を用意して、以下のようなかんじで記載する
<?php
use ether\simplemap\enums\MapTiles;
return [
'mapTiles' => MapTiles::GoogleRoadmap,
'mapToken' => 'YOUR API KEY',
];
?>これで管理画面で Google Map を使って位置情報等がとれるようになる。
スカイツリーを検索してみた。
問題なさそう。
State の所に都道府県が入ってきている。
ただ、表記が英語になっている。。。
これは何を見て判定しているんだろうか。これは後で調べてみよう。
State のフィールドとかは検索したときにデータとして持つようで、例えば OpenStreetMap で検索した状態で持っているデータがあるときに、その後地図を Google Map に切り替えても State に値が入る訳ではない。
そうそう変えるものでは無いと思うが意識しておいた方がよさそう。
地図系のサービスとかも色々あるんだなぁ
- HERE | グローバルな位置情報・地図データサービス
https://www.here.com/jp - 高速・軽量・安価で、カスタマイズ性が高い、オリジナル地図が作れるサービス「Geolonia Maps」 - 株式会社 Geolonia (ジオロニア)
https://geolonia.com/maps/