Google Mapの表示言語を指定する

小ネタ

弊社サイトを多言語(日/英)対応にしたのですが、弊社へのアクセスページにあるGoogle Mapも多言語化しようとして、日本語の情報を見つける事ができなかったため、この方法に関して書いておきます。

はじめに

本日、弊社サイトを多言語 ( 日/英 ) 対応にした旨 ニュース記事 を書きました。

多言語化といっても、Magnolia CMS の多言語対応機能を利用して、メニューや ( ごく ) 一部のコンテンツを英語化した程度ですが、その中の一つ、アクセスマップを英語化するにあたって、利用している Google Map API の表示も英語化したいと考えました。

結果からすると、非常に簡単な方法で実現できた訳ですが、「簡単に調べられんだろ!」と思って調べはじめたのはいいのですが、「これだ!」 という日本語の情報を見つけられなかったため ( キーワードの選定が下手だった可能性も十分あるが )、以下に記しておきます。

※写真は IM FREE から ( Panther chameleon profile by Tambako the Jaguar )

前提

弊社 アクセスページ では Google Maps JavaScript API v3 を利用して ページに Google Map を埋め込んでいます。
この場合における設定方法になります。

この API を使ってページに Google Map を埋め込む方法に関しては説明しません。
これについてはネット上で解説しているサイトが多数あるようなので、それらを参照して下さい。

方法

Google Maps JavaScript API v3 を利用して Google Map を埋め込んでいる場合、HTML中には以下のようなコードが埋め込まれているはずです。

<script src="//maps.google.com/maps/api/js">
</script>

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

<script>
.... 中略 .... 
</script>

このコードを、以下のように変更します。

<script src="//maps.google.com/maps/api/js?language=en-us">
</script>

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

<script>
....
</script>

これだけです。技術情報とも呼べないような情報ですが。

※尚、言語設定をしない状態の場合、Webブラウザの言語設定によって表示が変わります。
日本語サイトなのになぜか英語で表示されるといった場合、ブラウザの言語設定に問題がないか ( en-us が ja よりも優先されている等 ) 確認しましょう。

実際のページ

実際のページをリンクしておきます。
弊社サイトのアクセスページになります。

※リンク先ページのhtmlソースを参照して、上記 scriptタグで囲まれた部分を見れば、実際にどのようなコードを書けばよいかも判ると思います (-_-;

URLで指定する場合

尚、APIで埋め込む形でない場合もHTTPリクエストパラメータに language=<言語コード> を追加する事で表示言語を設定できるようです。

全てのロケールを試してはいませんが、以下のものに関しては切り替わりました。
( 以下は適当に思いついたもので調べたもの。対応する言語が無い場合必要に応じて調べてください )

ロケール名言語コード
日本語ja
英語 (U.S.)en-us
スペイン語 (スペイン)es
ロシア語ru

参考 : ロケール ID (LCID) の一覧

Google Maps API を英語以外の言語で表示するにはどうすればよいですか? - Google Map API に"サポートされている言語のスプレッドシート"のリンクがあるのですが、現状リンク先に飛ぶと「このドキュメントは公開されていません。」 状態になってしまっています。