a-blog cmsの「位置情報」のUIをOpenStreetMapからGoogle Mapsに戻す
a-blog cmsはVer.2.9系から「位置情報」のデフォルトUIが、Google Maps APIからOpenStreetMap APIに変更されました。
これは周知の通り、Google Maps APIが課金情報を結び付けなければ表示に制限がかかるようになったことに伴い、OpenStreetMap APIへの要望が高まったことを受けたものです。
地図ユニットについては管理画面の「コンフィグ＞編集設定」から変更できますが、位置情報は管理画面からは変更できません。
なぜ元に戻すのか
バージョンアップ後のa-blog cmsを更新している担当者から「位置情報の地図を検索しても、何も起きない」という問い合わせが来るようになりました。
原因は、詳細な住所で検索しようとしていたためでした。
検索精度が高く、枝番や建物単位でも検索可能なGoogle Mapsに対し、OpenStreetMapは条や町名単位までの検索しかできないようです。かつ、a-blog cmsの地図検索は、ver2.10時点で検索に失敗した場合は何もアラートを返しません。
このため、更新担当者には何も起きていないように見えていたのです。
また、投稿画面ではOpenStreetMap、実際の表示ではGoogle Mapsというのはユーザビリティとしてもいまひとつです。
このため、Google Mapsに戻すことにしました。
戻す方法
利用中のテーマ内に /admin/entry/geo.html というファイルを作成してください。
以下のコードをコピー・ペーストして保存し、サーバーにアップロードしてください。
<!-- BEGIN_MODULE Touch_GeolocationEntryFunction -->
<div id="geometry" class="js-entry-geo-edit clearfix">
<table class="entryFormTable acms-admin-table-entry">
<tr>
<th style="vertical-align: top;">位置情報</th>
<td>
<div class="acms-admin-form-group">
<!-- BEGIN_IF [{geo_lat}/nem/_and_/{geo_lng}/nem/] -->
<input class="js-geo_input acms-admin-btn" type="button" data-type="delete"/>
<!-- ELSE -->
<input class="js-geo_input acms-admin-btn" type="button" data-type="add"/>
<!-- END_IF -->
</div>
<div class="js-geo_form js-map-editable" style="display:none">
<div class="acms-admin-form-group">
<label for="input-text-map-search_text" class="acms-admin-hide-visually"><!--T-->住所で検索する<!--/T--></label>
<input type="text" name="" value="" id="input-text-map-search_text" class="js-editable_map-search_text" size="40"/>
<input type="button" name="" value="<!--T-->検索<!--/T-->" class="js-editable_map-search_button acms-admin-btn-admin"/>
</div>
<div class="acms-admin-form-group">
<!-- BEGIN_IF [{geo_lat}/nem/_and_/{geo_lng}/nem/] -->
<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center={geo_lat},{geo_lng}&zoom={geo_zoom}&size=640x360&maptype=roadmap&markers={geo_lat},{geo_lng}&sensor=false&key=%{GOOGLE_API_KEY}" width="640" height="360" style="display:block;" />
<!-- ELSE -->
<img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=640x360&maptype=roadmap&markers=35.185574,136.899066&sensor=false&key=%{GOOGLE_API_KEY}" width="640" height="360" style="display:block;" />
<!-- END_IF -->
</div>
<label for="input-text-geo_lat"><!--T-->緯度<!--/T--></label> <input type="text" name="geo_lat" value="{geo_lat}" size="9" id="input-text-geo_lat" class="js-map_editable-lat acms-admin-form-width-mini"/>
<label for="input-text-geo_lng"><!--T-->経度<!--/T--></label> <input type="text" name="geo_lng" value="{geo_lng}" size="10" id="input-text-geo_lng" class="js-map_editable-lng acms-admin-form-width-mini"/>
<label for="input-text-geo_zoom"><!--T-->ズーム<!--/T--></label> <input type="text" name="geo_zoom" value="{geo_zoom}" size="10" id="input-text-geo_zoom" class="js-map_editable-zoom acms-admin-form-width-mini"/>
<input type="hidden" name="geometry[]" value="geo_lat"/>
<input type="hidden" name="geometry[]" value="geo_lng"/>
<input type="hidden" name="geometry[]" value="geo_zoom"/>
</div>
</td>
</tr>
</table>
</div>
<!-- END_MODULE Touch_GeolocationEntryFunction -->
編集画面へ移動し、開発モードなどでキャッシュをクリアするように再読込して、Google Mapsに戻っていることを確認してください。
補足
- これは暫定的な措置です。a-blog cmsは開発が早いCMSなので、今後のバージョンで使用するAPIを選べるようになる可能性があります。
- 当然ながら、課金情報を結びつけたアカウントのAPI Keyが必要です。無料枠オーバーにはご注意ください。
Author And Source
この問題について(a-blog cmsの「位置情報」のUIをOpenStreetMapからGoogle Mapsに戻す), 我々は、より多くの情報をここで見つけました https://qiita.com/webbingstudio@github/items/cbb9c2408babae942e58著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .