言語の指定(ローカライズ)

広告

Google Maps APIでは地図上に表示されるコントロールやラベルの言語として、閲覧している各ユーザーのブラウザに設定されている優先言語から判別して表示する言語を決定します。ただブラウザの設定とは別に特定の言語を使って表示させることも可能です。ここでは言語のローカライズ方法について解説します。

1.languageパラメータ
2.サポートされている言語のリスト
3.サンプルプログラム

ブラウザの設定を無視し、特定の言語で強制的に表示させるにはJavaScriptコードの読み込みを行う時に「language」パラメータを使って指定します。

https://maps.googleapis.com/maps/api/js?language=lang&key=APIKey

常に日本語を使って表示させたい場合は次のように指定して下さい。

<script async defer
    src="https://maps.googleapis.com/maps/api/js?language=ja&key=APIKey">
</script>

常に英語で表示を行いたい場合には次のように指定して下さい。

<script async defer
    src="https://maps.googleapis.com/maps/api/js?language=en&key=APIKey">
</script>

本来は利用者の方が言語を選択できた方が便利なので設定の必要はないと思いますが、何らかの理由で言語を固定したい場合などに利用されてみて下さい。

languageパラメータの値として指定可能な最新のリストについては下記を参照して下さい。

p5-1

2016年11月現在サポートされているコードと言語の組み合わせは次の通りです。

Code Language       Code Language
-----------------------------------
ar   Arabic         kn   Kannada
bg   Bulgarian      ko   Korean
bn   Bengali        lt   Lithuanian
ca   Catalan        lv   Latvian
cs   Czech          ml   Malayalam
da   Danish         mr   Marathi
de   German         nl   Dutch
el   Greek          no   Norwegian
en   English        pl   Polish
en-AU   English (Australian)
en-GB   English (Great Britain)
pt      Portuguese
pt-BR   Portuguese (Brazil)
pt-PT   Portuguese (Portugal)
es   Spanish
eu   Basque         ro   Romanian
eu   Basque         ru   Russian
fa   Farsi          sk   Slovak
fi   Finnish        sl   Slovenian
fil  Filipino       sr   Serbian
fr   French         sv   Swedish
gl   Galician       ta   Tamil
gu   Gujarati       te   Telugu
hi   Hindi          th   Thai
hr   Croatian       tl   Tagalog
hu   Hungarian      tr   Turkish
id   Indonesian     uk   Ukrainian
it   Italian        vi   Vietnamese
iw   Hebrew
ja   Japanese
zh-CN   Chinese (Simplified)
zh-TW   Chinese (Traditional)

例えば英語(English)であれば「en」、フランス語(French)であれば「fr」を「language」パラメータの値として指定します。

では簡単なサンプルを作成して実際に試してみます。言語として英語(en)を指定してみます。

function initMap() {
  var opts = {
    zoom: 15,
    center: new google.maps.LatLng(34.687146,135.52597)
  };
  var map = new google.maps.Map(document.getElementById("map"), opts);
}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Google Maps API サンプル</title>
  </head>
  <body>
    <p>大阪城です。</p>

    <div id="map" style="width:620px; height:400px"></div>

    <script type="text/javascript" src="code5_1.js">
    </script>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?language=en&key=APIKey&callback=initMap">
    </script>
  </body>
</html>

ブラウザでWebページを開くと次のように表示されます。

p5-2

ブラウザの優先言語は日本語になっていますが、言語の設定が英語となっていますので地図上のコントロールや地図に表示されているラベルは英語で表示されています。このようにlanguageパラメータを設定することで、ユーザーの環境に関わらず特定の言語を使って地図のコントロールやラベルを表示させることが可能です。

( Written by Tatsuo Ikura )