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

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

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

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

ここでは、ブログ管理画面のブログ詳細画面として使用される field.html に記述する内容を説明します。以下の内容を追加することで、ブログ詳細画面の編集時にカスタムフィールドとして入力できるようになります。

field.html に追加する内容


ブログのカスタムフィールドで設定した例(設定)

ブログのカスタムフィールドで設定した例(設定)


<table>
<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/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false" 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>
</table>

各記述の説明(設定部分)

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

2行目:Google Maps編集用のclassの記述

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

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

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

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

<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" />

7行目:マップの表示の記述

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

8〜10行目:緯度・経度・ズーム値の入力エリアの記述

緯度 <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" />

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

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

古いバージョンをお使いの方はご注意ください。(2013年1月15日追記)

v1.5.2でGoogle Mapsのカスタムフィールドが正しく動作していないことが分かりました。

パッチファイルを用意しました。

/js/dispatch/admin.js
/js/dispatch/edit.js
ダウンロードしてきたファイルを上書きしてください。