ホーム > サポート・マニュアル > チュートリアル > カスタムフィールド > カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

チュートリアル

Google Maps API がV3になったことに伴い、V2までで必要だったAPIキーが不要になりました。このためGoogle Mapsの表示に関する記述を変更しました。(2012年6月14日追記)

v1.5.2でGoogle Mapsのカスタムフィールドが正しく動作していないことが分かりました。
パッチファイルを用意しました。
/js/dispatch/admin.js
/js/dispatch/edit.js
ダウンロードしてきたファイルを上書きしてください。
(2013年1月15日追記)

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

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

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

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

field.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/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>

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

各記述にある「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行目:マップの表示の記述

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

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/preview.html)

ここでは、ブログ管理画面のブログ詳細画面で内容の確認表示として使用される preview.html に記述する内容を説明します。カスタムフィールドで入力した内容が反映されて表示されるようになります。

preview.html に追加する内容

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

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

<tr>
<th>カスタムフィールドを利用したGoogle Maps</th>
<td>
<!-- BEGIN lat:veil -->
<img class="column-map-" src="http://maps.google.com/maps/api/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=400x300&maptype=roadmap&markers={mapLat},{mapLng}&sensor=false" 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/maps/api/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=マップの幅xマップの高さ&maptype=roadmap&markers={mapLat},{mapLng}&sensor=false" width="マップの幅" height="マップの高さ" style="display:block;" />
<!-- END lat:veil -->


携帯アクセス解析