Mugichoko's blog

Mugichoko’s blog

プログラミングを中心としたメモ書き.

Google MapsをWebページに英語で埋め込む

経緯

ちょっとしたお仕事で「Google MapsをWebページに英語で埋め込む」必要がでてきました.2018年7月20日現在,Google Mapsはデフォルトでは個々人が設定した言語に応じた言語(詳細はこちら)が表示されるそうで,それはそれで親切なのですが「どうしても英語で表示させたい!」といった要望が出たときには困ります.

やり方

概要

  1. (持っていない人は)Googleアカウントを作成
  2. Google Cloud Platformにアクセスしてプロジェクトを作成
  3. Maps Embed APIを設定
  4. <iframe>タグに&language=enを設定

このやり方はこちらのブログを参考にさせて頂いたのですが,どうも微妙にGoogleのサービス名が変わっていたり,インタフェースが変わっていたりと少し迷ったので,現状で最新の情報を共有したいと思った次第です.

さて,ステップ1は簡単なので無視したとして,以降,ステップ2から説明していきます.ここでは,http://test.com/という架空のサイト以下の全HTMLファイルで英語のGoogle Mapsを埋め込みたい,という前提で進めます.

Google Cloud Platformにアクセスしてプロジェクトを作成

  1. まずはGoogle Cloud Platformにアクセスします.すると以下のようなインタフェースが現れるので,ページ上部のCREATE PROJECTをクリックします. f:id:Mugichoko:20180721054938p:plain
  2. Project Nameに名前を入れます.ここでは,testとしておきます. f:id:Mugichoko:20180721054946p:plain
  3. しばらくすると,以下のようにプロジェクトが作成されます. f:id:Mugichoko:20180721054959p:plain

Maps Embed APIを設定

  1. ページ左上にある「三」のようなボタンをクリックし,APIs & Services >> Libraryと選択します. f:id:Mugichoko:20180721055006p:plain
  2. すると,以下の画面が現れます. f:id:Mugichoko:20180721055017p:plain
  3. 検索窓でembed等と検索するとMaps Embed APIが現れます.これをクリックします. f:id:Mugichoko:20180721055024p:plain
  4. するとこの画面に飛ぶので,ENABLEをクリックして,このAPIを使えるようにします. f:id:Mugichoko:20180721055034p:plain
  5. ページ左上にある「三」のようなボタンをクリックし,Credentialsを選択します.そこに出てきたページのCreate credentialsをクリックし,API keyをクリックします. f:id:Mugichoko:20180721055045p:plain
  6. これで,以下のようにAPI Keyが作成されます.このときに出てくる,ウィンドウの右下にあるRESTRICT KEYをクリックするか,ページ左上にある「三」のようなボタンをクリックし,Credentialsをもう一度選択してAPI keyの名前をクリックするかで次に進みます. f:id:Mugichoko:20180721055054p:plain
  7. 出てきた画面の,NameAPI keyの名前を変更できますが,ここがメインではありません.直前でRESTRICTとあったように,どういったアプリケーションで利用できるか制限をかけます. f:id:Mugichoko:20180721055103p:plain
  8. 今回は,WebページにGoogle Mapsを埋め込むことが目的なので,Application restrictionsからHTTP referrers (websites)をクリックします. f:id:Mugichoko:20180721055111p:plain
  9. Accept requestsfromtheseHTTP referrers(websites) という項目が新たに表れるため,そこに,Google Mapsを埋め込みたいURLを指定します.今回の場合,http://test.com/以下の全てのページで使いたいという想定なので,http://test.com/*とします.最後のアスタリスクは,直下の全ファイルを指すワイルドカード)です. f:id:Mugichoko:20180721055122p:plain

実際に埋め込んでみる

上記はhttp://test.com/という架空のサイトで説明してきましたが,実際に本ポストに英語のGoogle Mapsを埋め込んでみたいと思います.

埋め込む地図の作り方

Googleの公式に分かりやすく説明されています.

まずは普通に埋め込んでみる

上記のGoogleの公式にある例のほぼそのままで使ってみます.

<iframe width="100%" height="450" frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

上記のYOUR_API_KEYに自分のAPI keyを入力すると,以下のように表示されます.

英語に指定して埋め込んでみる

英語に指定するには,srcの末尾に&language=enを追加します.

<iframe width="100%" height="450" frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Space+Needle,Seattle+WA
  &language=en" allowfullscreen>
</iframe>

上手く英語になっています.今後,GoogleのMaps Embed Map APIの仕様が変わると,またうまく表示されなくなってしまうかもしれませんが,2018年7月20日現在はこれでちゃんと動作します.