【備忘録】GoogleMapの多言語対応

 

 Web技術

ホームページにGoogleMapを表示させたいけれど、
海外の方向けに英語で表示させたい!
なんてこと、多くなってきましたね。

GoogleMapを多言語で表示させるには
Google Maps Embed APIを利用してiframeで表示させるのが便利です。

まずはAPIキーを取得します

APIキーは、Googleにログインし
Google Maps Embed API | Google Developers
で取得できます。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  1. 右上のキーを取得をクリックします。

2. Select or create projectをクリックします。

3. + Create a new project をクリックします。

4. 名前(任意)をつけて NEXT をクリックします。

5. 無事にAPIキーが取得できました。
セキュリティを高めるのに、キーに制限をかけたい場合は、API Console から設定します。

埋め込むコードを作成します

埋め込むコードの基本形は以下です。

場所の名前をUTF-8にエンコード化します

場所の名前をUTF-8にエンコード化するには、以下のサイトが便利です。
Web便利ツール/URLエンコード・デコードフォーム – TAG index

エンコードしたい文字列(場所の名前)を入れ、
文字コードが「UTF-8」になっているのを確認し、エンコードするをクリックします。

無事UTF-8にエンコードできました。

埋め込むコードができました。
このコードをコピーして、場所名 の部分にペーストします。

このコードを使用したGoogleマップがこちらです。↓

他の言語表示にする(英語の場合)

英語表示の場合は場所の末尾に「&language=en」を追加します。

英語表示にしたGoogleマップがこちら。↓

他の言語表示にする(中国語の場合)

末尾に「&language=zh-TW」を追加します。

中国語(繁体字)表示にしたGoogleマップがこちら。↓


海外の方が閲覧する際にも、親切設計ですね (*^^*)

↓今回こちらの方のブログが参考になりました。
ありがとうございます。

●サイトに埋め込んだGoogleマップを英語表示する方法
https://miha5.com/2017/12/5989/

 この記事の投稿者

iziz

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ