- Home ›
- Google Maps API入門 ›
- Google Maps APIの基本 ›
- HERE
言語の指定(ローカライズ)
Google Maps APIでは地図上に表示されるコントロールやラベルの言語として、閲覧している各ユーザーのブラウザに設定されている優先言語から判別して表示する言語を決定します。ただブラウザの設定とは別に特定の言語を使って表示させることも可能です。ここでは言語のローカライズ方法について解説します。
1.languageパラメータ
2.サポートされている言語のリスト
3.ブラウザの優先言語を変更して言語が切り替わるか確認
4.languageパラメータを設定したサンプル
ブラウザの設定を無視し、特定の言語で強制的に表示させるにはJavaScriptコードの読み込みを行う時に「language」パラメータを使って指定します。(languageパラメータの部分を表示の関係で改行していますが実際には改行せずに記述して下さい)。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=(true or false)"
&language=言語>
</script>
例えば常に日本語を使って表示させたい場合は次のように指定して下さい。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=(true or false)"
&language=ja>
</script>
また常に英語で表示を行いたい場合には次のように指定して下さい。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=(true or false)"
&language=en>
</script>
強制的に日本語で表示をするように設定すると、ユーザー側で言語の選択をすることができません。ユーザーはブラウザの使用言語の設定で表示する言語を変更することができますので、本当にこの設定を行うべきかどうかは慎重に検討されることをお勧めします。
languageパラメータの値として指定可能な最新のリストについては下記を参照して下さい。
2013年6月時点でのリストは以下の通りです。
| language code | language name | v2 | v3 |
|---|---|---|---|
| ar | ARABIC | Yes | Yes |
| eu | BASQUE | No | Yes |
| bg | BULGARIAN | Yes | Yes |
| bn | BENGALI | Yes | Yes |
| ca | CATALAN | Yes | Yes |
| cs | CZECH | Yes | Yes |
| da | DANISH | Yes | Yes |
| de | GERMAN | Yes | Yes |
| el | GREEK | Yes | Yes |
| en | ENGLISH | Yes | Yes |
| en-AU | ENGLISH (AUSTRALIAN) | No | Yes |
| en-GB | ENGLISH (GREAT BRITAIN) | No | Yes |
| es | SPANISH | Yes | Yes |
| eu | BASQUE | Yes | Yes |
| fa | FARSI | No | Yes |
| fi | FINNISH | Yes | Yes |
| fil | FILIPINO | Yes | Yes |
| fr | FRENCH | Yes | Yes |
| gl | GALICIAN | Yes | Yes |
| gu | GUJARATI | Yes | Yes |
| hi | HINDI | Yes | Yes |
| hr | CROATIAN | Yes | Yes |
| hu | HUNGARIAN | Yes | Yes |
| id | INDONESIAN | Yes | Yes |
| it | ITALIAN | Yes | Yes |
| iw | HEBREW | Yes | Yes |
| ja | JAPANESE | Yes | Yes |
| kn | KANNADA | Yes | Yes |
| ko | KOREAN | Yes | Yes |
| lt | LITHUANIAN | Yes | Yes |
| lv | LATVIAN | Yes | Yes |
| ml | MALAYALAM | Yes | Yes |
| mr | MARATHI | Yes | Yes |
| nl | DUTCH | Yes | Yes |
| nn | NORWEGIAN NYNORSK | Yes | No |
| no | NORWEGIAN | Yes | Yes |
| or | ORIYA | Yes | No |
| pl | POLISH | Yes | Yes |
| pt | PORTUGUESE | Yes | Yes |
| pt-BR | PORTUGUESE (BRAZIL) | Yes | Yes |
| pt-PT | PORTUGUESE (PORTUGAL) | Yes | Yes |
| rm | ROMANSCH | Yes | No |
| ro | ROMANIAN | Yes | Yes |
| ru | RUSSIAN | Yes | Yes |
| sk | SLOVAK | Yes | Yes |
| sl | SLOVENIAN | Yes | Yes |
| sr | SERBIAN | Yes | Yes |
| sv | SWEDISH | Yes | Yes |
| tl | TAGALOG | No | Yes |
| ta | TAMIL | Yes | Yes |
| te | TELUGU | Yes | Yes |
| th | THAI | Yes | Yes |
| tr | TURKISH | Yes | Yes |
| uk | UKRAINIAN | Yes | Yes |
| vi | VIETNAMESE | Yes | Yes |
| zh-CN | CHINESE (SIMPLIFIED) | Yes | Yes |
| zh-TW | CHINESE (TRADITIONAL) | Yes | Yes |
では簡単なサンプルを作成して実際に試してみます。まずはブラウザに設定してある優先言語を変更し、表示言語が変更されるかどうかを確認してみます。
function initialize() {
var latlng = new google.maps.LatLng(34.686722,135.526974);
var opts = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<title>Google Maps サンプル</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
</script>
<script src="./js/code5_1.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>自宅の地図です。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>
ブラウザでWebページを開くと次のように表示されます。
ブラウザの優先言語は日本語になっていますので、地図上のコントロールや地図に表示されているラベルは日本語で表示されています。
それではブラウザに設定されている優先言語を英語に変更してみます(下記はChromeで変更した場合です)。
変更語に先ほどと同じWebページをブラウザで開くと次のように表示されます。
地図上の右上に表示されているコントロールや、地図に表示されているビル名などのラベルも英語になっていることが確認できます。
次にlanguageパラメータを設定したサンプルを試してみます。(スクリプトのファイルは変更がありませんので先ほどと同じものを使います)。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<title>Google Maps サンプル</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false&language=ja">
</script>
<script src="./js/code5_1.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>自宅の地図です。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>
ブラウザでWebページを開くと次のように表示されます。(ブラウザの優先言語は日本語になっています)。
それではブラウザに設定されている優先言語を英語に変更した後で先ほど同じWebページを開いてみます。
今回のサンプルではlanguageパラメータを使って言語を日本語に設定していますので、ブラウザの優先言語の設定に関わらず地図は日本語で表示されています。
このようにlanguageパラメータを設定することで、ユーザーの環境に関わらず特定の言語を使って地図のコントロールやラベルを表示させることが可能です。
( Written by Tatsuo Ikura )
AjaxTower