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

Google Maps APIを使ってWebページに地図を表示した場合、地図上に表示されるコントロールやラベルの言語として、閲覧している各ユーザーのブラウザに設定されている優先言語から判別して表示する言語を決定します。

通常はこのままで問題ありませんが、利用者のブラウザに設定されている値に関係無く明示的に使用言語を設定する場合には「language」パラメータを使って指定します。

language=言語

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

<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>

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

<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>

このように指定することでブラウザで設定されている優先言語に関わらず明示的に指定した言語をベースに表示が行われます。

言語として指定可能な値は次の通りです(2011年5月現在)。

language code	language name
ar	ARABIC
eu	BASQUE
bg	BULGARIAN
bn	BENGALI
ca	CATALAN
cs	CZECH
da	DANISH
de	GERMAN
el	GREEK
en	ENGLISH
en-AU	ENGLISH (AUSTRALIAN)
en-GB	ENGLISH (GREAT BRITAIN)
es	SPANISH
eu	BASQUE
fa	FARSI
fi	FINNISH
fil	FILIPINO
fr	FRENCH
gl	GALICIAN
gu	GUJARATI
hi	HINDI
hr	CROATIAN
hu	HUNGARIAN
id	INDONESIAN
it	ITALIAN
iw	HEBREW
ja	JAPANESE
kn	KANNADA
ko	KOREAN
lt	LITHUANIAN
lv	LATVIAN
ml	MALAYALAM
mr	MARATHI
nl	DUTCH
no	NORWEGIAN
pl	POLISH
pt	PORTUGUESE
pt-BR	PORTUGUESE (BRAZIL)
pt-PT	PORTUGUESE (PORTUGAL)
ro	ROMANIAN
ru	RUSSIAN
sk	SLOVAK
sl	SLOVENIAN
sr	SERBIAN
sv	SWEDISH
tl	TAGALOG
ta	TAMIL
te	TELUGU
th	THAI
tr	TURKISH
uk	UKRAINIAN
vi	VIETNAMESE
zh-CN	CHINESE (SIMPLIFIED)
zh-TW	CHINESE (TRADITIONAL)

サンプルコード

では実際に試してみます。

code5_1.js

function initialize() {
  var latlng = new google.maps.LatLng(33.495634,133.57388);
  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

map5_1.html

<!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"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
    <script src="./js/code5_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

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

p5-1

今回は言語として日本語を指定していますので、ブラウザの設定に関わりなく日本語で表示されています。

続いて「hl=en」と指定し言語を英語に設定した場合です。スクリプトの部分は先ほどと同じです。

map5_2.html

<!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"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
    <script src="./js/code5_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

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

p5-2

今回は言語として英語を指定していますので、メニュー部分や地図上の表記も一部英語になています。

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page