今回はGoogle Maps JavaScript APを使って地図をカスタマイズする際の、「言語設定」について解説したいと思います。
この「言語設定」のことを「言語のローカライズ」と呼びます。
Google Maps JavaScript API を使用して地図を作成する場合、デフォルトの言語は、ブラウザで指定されたユーザの優先言語設定となります。
このブラウザで指定されたユーザの優先言語設定は、ブラウザの設定の「言語」を確認しましょう。(choromeの場合)
言語の項目の一番上に表示されている言語が、第一優先で表示されています。
Google Maps JavaScript APIで特に何も指定しない場合は、この一番上に表示されている言語で、コントロール名や著作権表示、運転ルート、ラベルなどのテキスト情報が表示されます。
それでは、この表示を特定の言語で表示する方法を見ていきましょう。
日本語を設定(【&language=ja】)
英語を設定(【&language=en】)
ロシア語を設定(【&language=ru】)
例えば、ペルシア語を設定して API をロードすると、どのようになるか見てみましょう。
サンプルページはこちら
デフォルトで設定している言語かかわらず、マップ にペルシア語使用されることが確認できますね。
上記デモで設定したペルシア語は、RTL 言語(右から左に表記する文字)です。
RTL 言語の場合は、 要素に dir='rtl' を追加する必要がありますので、合わせて注意しましょう。
(※RTL 言語の例:アラビア語、ヘブライ語、ペルシア語)
※新しい言語が頻繁に追加されているようなので、Google Maps APIの公式サイトにも掲載されていない場合があります。
最新の情報は、こちらの公式サイトをご確認ください。
2017年11月時点で掲載されているのサポート言語は以下の通りとなります。
マップの言語設定の解説は以上となります。
マップに言語を設定する際は、必ず事前に動作を検討した上で設定するように注意しましょう。
この「言語設定」のことを「言語のローカライズ」と呼びます。
Google Maps JavaScript API を使用して地図を作成する場合、デフォルトの言語は、ブラウザで指定されたユーザの優先言語設定となります。
このブラウザで指定されたユーザの優先言語設定は、ブラウザの設定の「言語」を確認しましょう。(choromeの場合)
言語の項目の一番上に表示されている言語が、第一優先で表示されています。
Google Maps JavaScript APIで特に何も指定しない場合は、この一番上に表示されている言語で、コントロール名や著作権表示、運転ルート、ラベルなどのテキスト情報が表示されます。
それでは、この表示を特定の言語で表示する方法を見ていきましょう。
実装方法
実装はJavaScript APIのコードを読み込む際に、末尾に【&language=???】という言語の設定(language パラメータ)を追加するだけです。1 | < script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=???" ></ script > |
日本語を設定(【&language=ja】)
1 | < script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=jp" ></ script > |
英語を設定(【&language=en】)
1 | < script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=en" ></ script > |
ロシア語を設定(【&language=ru】)
1 | < script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ru" ></ script > |
例えば、ペルシア語を設定して API をロードすると、どのようになるか見てみましょう。
サンプルページはこちら
デフォルトで設定している言語かかわらず、マップ にペルシア語使用されることが確認できますね。
上記デモで設定したペルシア語は、RTL 言語(右から左に表記する文字)です。
RTL 言語の場合は、 要素に dir='rtl' を追加する必要がありますので、合わせて注意しましょう。
(※RTL 言語の例:アラビア語、ヘブライ語、ペルシア語)
言語の設定一覧
その他言語の設定は以下の一覧を確認してください。※新しい言語が頻繁に追加されているようなので、Google Maps APIの公式サイトにも掲載されていない場合があります。
最新の情報は、こちらの公式サイトをご確認ください。
2017年11月時点で掲載されているのサポート言語は以下の通りとなります。
言語コード名 | 言語 | 言語コード | 言語 |
ar | アラビア語 | kn | カンナダ語 |
bg | ブルガリア語 | ko | 韓国語 |
bn | ベンガル語 | lt | リトアニア語 |
ca | カタロニア語 | lv | ラトビア語 |
cs | チェコ語 | ml | マラヤーラム語 |
da | デンマーク語 | mr | マラーティー語 |
de | ドイツ語 | nl | オランダ語 |
el | ギリシャ語 | no | ノルウェー語 |
en | 英語 | pl | ポーランド語 |
en-AU | 英語(オーストラリア) | pt | ポルトガル語 |
es | 英語(英国) | pt-BR | ポルトガル語(ブラジル) |
es | スペイン語 | pt-PT | ポルトガル語(ポルトガル) |
eu | バスク語 | ro | ルーマニア語 |
fa | ペルシャ語 | ru | ロシア語 |
fi | フィンランド語 | sk | スロバキア語 |
fil | フィリピン語 | sl | スロベニア語 |
fr | フランス語 | sr | セルビア語 |
gl | ガリシア語 | sv | スウェーデン語 |
gu | グジャラート語 | ta | タミル語 |
hi | ヒンディー語 | te | テルグ語 |
hr | クロアチア語 | th | タイ語 |
hu | ハンガリー語 | tl | タガログ語 |
id | インドネシア語 | tr | トルコ語 |
it | イタリア語 | uk | ウクライナ語 |
iw | ヘブライ語 | vi | ベトナム語 |
ja | 日本語 | zh-CN | 中国語(簡体字) |
zh-TW | 中国語(繁体字) |
マップの言語設定の解説は以上となります。
マップに言語を設定する際は、必ず事前に動作を検討した上で設定するように注意しましょう。
ご質問などございましたら、お気軽に下記コメント欄にお寄せください。
※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
(※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。)
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google+よりお問い合わせください。
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
(※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。)
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google+よりお問い合わせください。
コメント
コメントを投稿