カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

カスタムフィールドを利用して、Google Mapsの経度・緯度・ズーム値の入力インターフェースを作成する方法を説明します。（v1.3.0より）

この機能を使用するには、あらかじめGoogle Maps API Keyを取得し、管理ページの[プロパティ設定]でAPI Keyを設定する必要があります。[プロパティ設定]画面を表示するには、管理画面上部のメニュー[カスタマイズ管理]–[コンフィグ]のリンクをクリックするか、管理画面下部のメニュー[コンフィグ]のリンクをクリックし、[コンフィグ項目リスト]内の[プロパティ設定]ボタンをクリックします。

カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

例）[ブログ管理] - [ブログ詳細]画面にカスタムフィールドを実装する場合（/admin/blog/edit.html）

---

<tr class="js-map-editable">
<th>カスタムフィールドを利用したGoogle Maps</th>
<td>
<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
<input type="button" name="" value="検索" class="js-editable_map-search_button" disabled="disabled" /> 
<img class="js-map_editable-container" src="http://maps.google.com/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&key=%{GOOGLE_API_KEY}" width="400" height="300" style="display:block;" />
緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />
</td>
</tr>

各記述の説明（設定部分）

各記述にある「js-」で始まるclassは、必ず上記の記述のとおりに記述してください。（各記述の全体を囲む要素には「class="js-map-editable"」を必ず記述してください。）記述しない場合、正常に動作しなくなります。

1行目：Google Maps編集用のclassの記述

Google Mapsをカスタムフィールドで利用するための記述。各記述全体を囲む要素に記述してください。

<tr class="js-map-editable">

4〜5行目：スポット検索の入力エリアの記述

スポットの位置を住所やスポット名で検索するための入力エリア。

<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="入力エリアの横幅" />
<input type="button" name="" value="ボタンのラベル名" class="js-editable_map-search_button" disabled="disabled" /> 

6行目：マップの表示の記述

%{GOOGLE_API_KEY}の部分に、管理ページの[プロパティ設定]で設定しているGoogle MapsのAPI Keyが出力されます。

<img class="js-map_editable-container" src="http://maps.google.com/staticmap?center=35.185574,136.899066&zoom=10&size=マップの幅xマップの高さ&maptype=roadmap&markers=35.185574,136.899066&key=%{GOOGLE_API_KEY}" width="マップの幅" height="マップの高さ" style="display:block;" />

7〜9行目：緯度・経度・ズーム値の入力エリアの記述

緯度 <input type="text" name="lat" value="mapLat}" size="入力エリアの横幅" class="js-map_editable-lat" />
経度 <input type="text" name="lng" value="{mapLng}" size="入力エリアの横幅" class="js-map_editable-lng" />
ズーム <input type="text" name="zoom" value="{mapZoom}" size="入力エリアの横幅" class="js-map_editable-zoom" />

10〜12行目：緯度・経度・ズーム値のカスタムフィールドであることの記述

<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />

---

例）[ブログ管理] - [ブログ詳細]画面にカスタムフィールドを実装する場合（/admin/blog/detail.html）

---

<tr>
<th>カスタムフィールドを利用したGoogle Maps</th>
<td>
<!-- BEGIN lat:veil -->
<img class="column-map-" src="http://maps.google.com/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=400x300&maptype=roadmap&markers={mapLat},{mapLng}&key=%{GOOGLE_API_KEY}" width="400" height="300" style="display:block;" />
<!-- END lat:veil -->
</td>
</tr>

各記述の説明（表示部分）

4〜6行目：保存されたマップの表示

<!-- BEGIN lat:veil -->
<img class="column-map-" src="http://maps.google.com/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=マップの幅xマップの高さ&maptype=roadmap&markers={mapLat},{mapLng}&key=%{GOOGLE_API_KEY}" width="マップの幅" height="マップの高さ" style="display:block;" />
<!-- END lat:veil -->

---