地図ユニットの Google maps を表示環境とは関係なく英語化するには

この記事は公開日より8年以上経過しているため、現在の内容と異なる可能性があります。

本日、地図ユニットのカスタマイズの相談があった点について紹介しておきます。

英語サイトを作っているが地図ユニットの Google Maps の中は日本語で表示されてしまう。これを英語にするにはどうしたらいいでしょうか？ 上記は日本語の地図になります。

そして、下の地図が日本語も混じっていますが、英語設定にした Google Maps の地図です。

何もしなくても Google Map API は、お使いのブラウザの言語設定によって自動で地図の言語が切り替わるようにできております。 それでも、強制的に英語に固定するにはどうしたらいいでしょうか。

テーマに JavaScript を追加

次回のバージョンでは、言語の設定をできるようにする事も考えていますが、現状で、強制的に地図の言語を切り替えたい場合は、正規の方法ではありませんが、以下のようにしていただくことで対応可能です。

<script>
ACMS.Ready(function(){
ACMS.Config.s2dRegion = 'US&language=en';
});
</script>

/js/library.js を変更

以下のように /js/library.js の該当部分を変更します。

変更前

params.other_params = 'key='+ACMS.Config.googleApiKey;

変更後

params.other_params = 'key='+ACMS.Config.googleApiKey+'&region='+ACMS.Config.s2dRegion;

Static Maps の対応

JavaScript API だけの対応であれば上記で終わりになりますが、a-blog cms の地図ユニットは最初は Static Maps の表示になっています。クリックすると JavaScript 版に置き換わります。（なお Static Maps は仕様上 640px までしか生成しませんので、現状の a-blog cms では 640px 以上の地図を表示しようとすると JavaScript 版が表示されるようになっています）

Static Mpas も英語化するのであれば上記のカスタマイズと同様に region と language の設定が必要になります。 /themes/system/include/unit.html を利用しているテーマに unit.html をコピーして以下のように unit#map ブロックを修正します。

<!-- BEGIN unit#map -->
<!-- 地図 -->
<div class="column-map-{align}{display_size_class}"{display_size}[raw]>
	<!--#include file="/include/gmaps-error.html" -->
	<img src="//maps.google.com/maps/api/staticmap?center={lat},{lng}&zoom={zoom}&size={x}x{y}&maptype=roadmap&markers={lat},{lng}&key=%{GOOGLE_API_KEY}&region=US&language=en" alt="{msg}" width="{x}" height="{y}" title="クリックで地図が動かせるようになります。">
</div><!-- END unit#map -->

これで、地図ユニットの英語化が完了です。あと、参考に Google Maps API のローカライズに関するページを紹介しておきます。参考にしてください。

• コンセプト  |  Google Maps JavaScript API  |  Google Developers
  • 言語のローカライズ
  • 地域のローカライズ
  • 中国での API ローディング