言語の指定(ローカライズ)
Google Maps APIでは地図上に表示されるコントロールやラベルの言語として、閲覧している各ユーザーのブラウザに設定されている優先言語から判別して表示する言語を決定します。ただブラウザの設定とは別に特定の言語を使って表示させることも可能です。ここでは言語のローカライズ方法について解説します。
1.languageパラメータ
2.サポートされている言語のリスト
3.サンプルプログラム
languageパラメータ
ブラウザの設定を無視し、特定の言語で強制的に表示させるにはJavaScriptコードの読み込みを行う時に「language」パラメータを使って指定します。
//maps.googleapis.com/maps/api/js?language=lang&key=APIKey
常に日本語を使って表示させたい場合は次のように指定して下さい。
<script async defer
src="//maps.googleapis.com/maps/api/js?language=ja&key=APIKey">
</script>
常に英語で表示を行いたい場合には次のように指定して下さい。
<script async defer
src="//maps.googleapis.com/maps/api/js?language=en&key=APIKey">
</script>
本来は利用者の方が言語を選択できた方が便利なので設定の必要はないと思いますが、何らかの理由で言語を固定したい場合などに利用されてみて下さい。
サポートされている言語のリスト
languageパラメータの値として指定可能な最新のリストについては下記を参照して下さい。
・
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="//maps.googleapis.com/maps/api/js?language=en&key=APIKey&callback=initMap">
</script>
</body>
</html>
ブラウザでWebページを開くと次のように表示されます。
ブラウザの優先言語は日本語になっていますが、言語の設定が英語となっていますので地図上のコントロールや地図に表示されているラベルは英語で表示されています。このようにlanguageパラメータを設定することで、ユーザーの環境に関わらず特定の言語を使って地図のコントロールやラベルを表示させることが可能です。
( Written by Tatsuo Ikura )
著者 /
プログラミングや開発環境構築の解説サイトを運営しています。