多言語サイトで Google Maps をうまく埋め込みする方法のまとめ

Google Maps Language URL Parameter Sample Memo

誰もが便利に使っている Google Maps ですが、多言語サイトを作るときに注意する点があるので、それを簡単にまとめました。

 

中国での注意

2015年1月現在の中国人パートナーからの情報によると、情勢が刻々と変わってきて、Google さんの中国からの締め出しが激しくなってきているので、もしかしたら Google Maps は将来、中国から使えなくなる可能性もなくなってきたかも。(参考ニュース)

ともかく、中国本土の Google Maps のアドレスは。

ではなく、

です。

中国本土向けにサイトを制作する際は、Google Maps の使用は気をつけましょう。

一番確実なのは、

を使う方法です。2015年1月現在、JS と Developer 登録をすると、Baidu Maps を埋め込めるようになります。

簡単に実装できそうだから、必要な人がいれば、お仕事としてブロックを作成しますのでお声がけください。concrete5 のブロックとしても開発できそう。

 

宣伝:ウェブサイトを作るなら WordPress よりも concrete5!(ブログは WordPress の方がいいです)

 

埋め込み iframe は 2016年2月現在、言語指定が不可能に

残念ながら2015年1月現在の Google Maps の画面から簡単に取得できる iframe のコードからは言語設定が不可能になりました。下記の Google Maps API から利用する必要があります。

[2016/3/1 追記] : iFrame のコードでも各言語でどう表示されるか知りたい方向けに続編の記事を書きました。こちらからご覧ください

ただ、ユーザーを第1に考えると、ユーザーが希望する言語を表示させないのは、不親切であるという Google さんのメッセージであると考えてください。

Web サイト制作者の方は、発注主の意見と、発注主のお客さんの利便性、どちらを優先させるべきでしょうか?

 

ともかく、格好つけな言葉は抜きにして(苦笑)

 

埋め込み Map の言語設定は Google Maps API や Google Static Maps を使うと可能になります

Google Maps Javascript API を使う

Google Maps API を使うと言語設定を強制的に行うことが出来ます。

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=true”>

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=true&language=ja“>

と、JS 読み込み時に言語のパラメーターが入ると設定ができます。

地域の設定もできます。これは、region パラメータを使います。

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=true&language=ja&region=JP“>

JS での埋め込み方法の詳細なローカライズ方法は Google Maps Javascript API v3Concept ページにある「Language Localization」をご覧ください。また地域の設定も「Region Localization」に載っています。

 

Google Statics Maps API を使う

Google Statics Maps API とは、Google Maps を画像として出力してくれるものです。レスポンシブ対応なサイトを作っていて、スマホでそのページを開いた時に、ページのスクロールではなくて、地図がスクロールされて面倒くさくなった人もいるかも・・・。

そういう時に有益なのが、Static Maps です。詳しくは Static Maps API V2 デベロッパーガイドをご覧になると良いかと思います。また無料版では、1日25,000回の表示までしか対応していないので、気をつけるように。

URLの例

私の大好きなカツカレーの上手い、ロサンゼルスの定食屋さんを表示するには

http://maps.googleapis.com/maps/api/staticmap?markers=34.041914,-118.461111&zoom=15&size=640×300

てな感じで、Google Maps のURLによく出てくるようなパラメーターに、 size を追加して、img src に入れ込んであげるとOKです。

表示の例

注意:このブログを記事公開から時間が経って見ている方は、APIの変更で見れていないかもしれませんので、予めご了承ください。

ただ、上記は、日本の方は日本語で表示されていると思うので

URLの例

英語のパラメーターである、&language=en を入れます。

http://maps.googleapis.com/maps/api/staticmap?markers=34.041914,-118.461111&zoom=15&size=640×300&language=en

このように、無事に英語で表示されるようになりました。

他にも、中国 (簡体字) だと

http://maps.googleapis.com/maps/api/staticmap?markers=34.041914,-118.461111&zoom=15&size=640×300&language=zh-Hans

あ、アメリカだから、中国語表記がそのそも少ない・・・。ちょっとわかりづらい・・・すいません。

 

リンクを貼るときの言語の指定方法

上記の Static Maps を使うときに、よく、画像にリンクを貼って、Google Maps に飛ばさせたい時があります。

その時に、言語のパラメーターには「?hl=○○」というパラメーターを入れます。

日本語
https://www.google.com/maps/place/Tokyo+Fast+Food/@34.041914,-118.461111,17z/?hl=ja

英語
https://www.google.com/maps/place/Tokyo+Fast+Food/@34.041914,-118.461111,17z/?hl=en

中国 簡体字
https://www.google.com/maps/place/Tokyo+Fast+Food/@34.041914,-118.461111,17z/?hl=zh-Hans
中国 繁体字
https://www.google.com/maps/place/Tokyo+Fast+Food/@34.041914,-118.461111,17z/?hl=zh-Hant

 

これで、多言語サイトの運用もバッチリ。

 

言語コード一覧

2016年2月時点で、Google Maps が対応している言語のリストです。下記の language code の文字を上記のパラメーターに入れると、その言語の表記になるはずです。(注:全部チェックしてません。)

Language Code Language 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) pt Portuguese
en-GB English (Great Britain) pt-BR Portuguese (Brazil)
es Spanish pt-PT Portuguese (Portugal)
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 zh-CN Chinese (Simplified)
ja Japanese zh-TW Chinese (Traditional)

ただ、自分が確認した限り、中国語が、前述のサンプル分の表記でも可能だったので、最新でない可能性があるので注意してください。

 

concrete5 で快適な多言語サイト運用を!

上記の多言語サイト運用は、私が携わった多言語サイト構築で、簡単に concrete5 サイトにに実装できるようにさせていただきました。

とはいっても、各サイト特有なコーディングに合わせているカスタマイズ仕様で、一般的な配布パッケージにする使用ではありません。パッケージ化時間がないので、もっとコンクリートファイブジャパンにお仕事をいただければ、配布パッケージを作る時間が出来るかもしれません(苦笑)

 

その他、多言語に気をつけること、Slideshare で公開中

 

その他、多言語サイト制作時に気をつけないといけないことを、一般のウェブサイト企画と、WordPress サイトに特化したスライドを制作し、公開中です。

 

 

 

では、みなさんも、がんばって多言語サイト制作を!行き詰まったら、弊社にお問合せください〜。

 

宣伝:ウェブサイトを作るなら WordPress よりも concrete5!(ブログは WordPress の方がいいです)

以上